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: -
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: -
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: -
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.