. Advertisement .
..3..
. Advertisement .
..4..
Image manipulation is a must-have skill for all HTML-CSS developers, as it will determine the look of your website. You can control many things in an image, but none is as vital and basic as resizing.
That is why we prepared this guide on how to resize image in CSS. We hope that it can help you.
Resize Image In CSS Using max-height And max-width
When an image is inserted into your HTML code, its size tells you how many pixels it will occupy. Due to this nature, there are cases where the image’s size is bigger than its container’s size. In other words, the image may take up more area on your screen, occupying other elements’ space.
This issue is as basic as returning a string, but it is something that you simply can’t ignore.
The easiest way to take care of this issue is using the CSS properties max-height and max-width. They allow the user to resize any image in accordance with its container, as they specify an element’s maximum width and height.
If the element has a higher height and wider width, it will be restricted to the properties’ values. On the other hand, the size stays the same if it’s smaller than the values.
An easy-to-understand example is to make an HTML div with a cat class. Then put in a new image using <img> within div. The next thing to do is select the tag and assign its max-width and max-height properties to 100%. Finally, choose your cat class and give it a width and height of 100px.
Now, even if you put in a 200px image, the container only supports max values of 100px. The result is the image shrinking to this max value.
<div class="cat">
<img src="https://loremflickr.com/200/200" />
</div>
img { max-width: 100%; max-height: 100%; }
.cat { height: 100px; width: 100px; }
Resize Image In CSS Using object-fit
Another popular approach to this issue is to use the object-fit property to make the image fit into its container. This approach lets you specify exactly how the image will fit by taking in inputs like contain, fill, scale-down, none, and cover.
Of them, the contain property is the most useful, as it makes larger image shrinks to fit smaller containers with no outside help. Let’s take the above example:
<div class="cat">
<img src="https://loremflickr.com/200/200" />
</div>
img { max-width: 100%; max-height: 100%; object-fit: contain;}
.cat { height: 100px; width: 100px; }
The result will be the same.
Resize Image In CSS Using max-height And auto
This approach is special in the way that it will only resize the image according to the max-height property. The auto property automatically scales the width following the image’s original ratio. It is especially useful if you don’t want the image to lose its shape or become too distorted.
Let’s look at the example again.
<div class="cat">
<img src="https://loremflickr.com/200/200" />
</div>
.cat { height: 100px}
img { width: auto; max-height: 100%;}
As you can see, you don’t need to specify the width attribute anymore. After familiarizing yourself with this approach, it can become the fastest solution.
Conclusion
We have shown you all there is to know about how to resize image in CSS. We hope that by reading through this article, you can master this skill with relative ease. It may not look like much at first glance, but it is a vital skill that you can always use throughout your programming journey.
Please look forward to the next article we publish if you find this one interesting.
Leave a comment