CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

How to resize an image in CSS

How to resize an image in CSS?

The resize image attribute is used in responsive web design to resize images to fit within the div container automatically. The resize image attribute is created using the CSS max-width property. If the width and height of the picture are defined in HTML, the resize Property will not operate. One of the most important aspects of responsive web design is dynamically resizing images to match the width of their containers. Because individuals increasingly use a variety of desktop computers, the web pages must be compatible with all of them. To prevent huge images from exceeding the width of their container, use max-width: 100 percent; height: auto.

The ways for resizing an image in CSS to fit it appropriately in a div while keeping its height and width are as follows: -

1) Resizing an image with CSS, use the max-width and max-height properties.

When adding an image into HTML, it takes up all the available pixels. When an image is contained within a container, the picture's size may be larger than the container's size. The image will take up more screen real estate, taking areas from other items. As a result, the content will not adhere to our style and will be unappealing. To solve this issue, we can automatically utilize the max-width and max-height CSS values to resize the picture to fit the container. These parameters determine an element's maximum height and width. If the element's content has a width and height greater than the max-width and max-height values, the element's sizes will be reduced.

Example: -

<!DOCTYPE html>
<html>
<head>
<style>
img {
 max-width: 100%;
 max-height: 100%;
}
.cat_pic {
 height: 350px;
 width: 350px;
}
</style>
</head>
<body>
<div class="cat_pic">
 <img src="https://loremflickr.com/320/240?lock=212" />
</div>
</body>
</html>

Output: -

How to resize an image in CSS

We've added an arbitrary image from LoremFlickr that's 320px wide and 240px tall in the sample below. However, the container cat pic has a 350px height and width. The larger photos compress to the size of the container because we are using the max-height and max-width parameters. As a result, the image was auto-resized.

2) To resize an image in CSS, use the object-fit Property.

To adjust the image to fit its container, one can even use the object-fit property in CSS. The image may be smaller or larger than the container. The attribute allows us to scale the picture or video to fit the container's dimensions. Using the object-fit attribute, we can determine how the image fits. The property accepts the fill, contain, cover, none, and scale-down values. We can utilize the content value to make the larger image fit into the container's dimensions.

Example: -

<!DOCTYPE html>
<html>
<head>
<style>
img {
 height: 100%;
 width: 100%;
 object-fit: contain;
}
.cat_pic {
 height:350px;
 width: 350px;
}
</style>
</head>
<body>
<div class="cat_pic">
    <img src="https://loremflickr.com/300/240/dog">
</div>
</body>
</html>

Output: -

How to resize an image in CSS

Here, we used a larger picture than the container's dimensions. The image is 600 pixels wide, but the container is only 300 pixels wide. We can compress the image to the container's dimensions using the object-fit attribute. As a result, we can resize the image automatically.

3)To resize an image with CSS, use the auto-width and max-height properties.

To determine the picture's width to fit in a container, we can use the auto value for the width and set the max-height property. The image's height will be reduced to match the container's height. Insert a picture like the one above in HTML and set the container's height to 200px in CSS. Choose the img tag, then change the width to auto and the max-height value to 100%.

Example: -

<!DOCTYPE html>
<html>
<head>
<style>
.cat_pic {
 height:250px;
}
img {
 width: auto; 
 max-height: 100%; 
}
</style>
</head>
<body>
<div class="cat_pic">
    <img src="https://loremflickr.com/300/240/dog">
</div>
</body>
</html>

Output: -

How to resize an image in CSS

The image in the example below was created with a height and width of 300 pixels. The container's height has been set to 200px. The image is shrunk to 240px when the max-height setting is set to 100 percent. As a result, we scaled the image's height to match the container's height.

Conclusion: -

In this tutorial, we have learned how to resize the image using suitable Properties in CSS.



ADVERTISEMENT
ADVERTISEMENT