How to change image sizes proportionally using CSS?

Spread the love

Sometimes, we want to change image sizes proportionally using CSS.

In this article, we’ll look at how to change image sizes proportionally using CSS.

How to change image sizes proportionally using CSS?

To change image sizes proportionally using CSS, we set the width or height to auto.

For instance, we write

<div class="container">
  <img src="something.png" />
</div>

to add a div with an img element inside.

Then we write

.container img {
  width: 100%;
  height: auto;
}

to set its height to auto to resize the height of the image proportional to the width.

Conclusion

To change image sizes proportionally using CSS, we set the width or height to auto.

Leave a Reply

Your email address will not be published. Required fields are marked *