Resize image proportionally with CSS?

Question

Is there a way to resize (scale down) images proportionally using ONLY CSS?I'm doing the JavaScript way, but just trying to see if this is possible with CSS.

Answer 1

Hi there,

The standard way to scale down images in css is this:

img {

max-width: 100%;

height: auto;

}

This is mobile friendly code.

Answer 2

Hello,

Resizing with CSS is always done proportionally unless you declare it otherwise.

For example, if you have an image whose size is 100x100, if you resize it with CSS like this:

img {

width: 200px;

}

...then that image will 'automatically' be 200px tall as well, even if the height wasn't declared.

However, if you declare the height to a value different than 200px (for this example of course), then the image will be rather than 'scaled' it will be simply resized to the dimensions you declared.

Taking the same 100x100 image, if you declare the height:

img {

width: 200px;

height: 300px;

}

...then the image will lose its proportion/ratio and will appear vertically squished.

Hope this helps.