Menu
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.
403
A common use is to set max-width: 100%; height: auto; so large images don't exceed their containers width. Another way is the use of object-fit property, this will fit image, without changing the proportionally.
The Simple Solution Using CSSBy setting the width property to 100%, you are telling the image to take up all the horizontal space that is available. With the height property set to auto, your image's height changes proportionally with the width to ensure the aspect ratio is maintained.
For proportional resizing purposes, it makes matters extremely simple: Define the width of an element as a percentage (eg: 100%) of the parent's width, then define the element's padding-top (or -bottom) as a percentage so that the height is the aspect ratio you need. And that's it!
Use the auto Value for Width and the max-height Property to Resize the Image in CSS. We can use the auto value to the width and set the max-height property to specify the width of an image to fit in a container. We will shrink the height of the image to the height of the container.
To resize the image proportionally using CSS:
img.resize { width:540px; /* you can use % */ height: auto; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
