Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to keep image proportion using calc (width - X)

I know that specifying only a width or a height in percentages will allow images to maintain their correct proportions, however, it seems if I try something like:

img {width: calc(100% - 60px);}

I lose the proportion. The image will become 60px narrower. I then tried this:

img {width: calc(100% - 60px); height: calc(100% - 60px);}

..but the image still wouldn't retain its correct proportion.

Does anyone know of a way with CSS, or possibly some light js, to use the calc unit while retaining the correct proportion?

The end goal is to have all images within a large (encompassing most of the content on each page) div assigned css to reduce their image size to fit within a mobile device (specifically iphone portrait orientation), without overflowing and causing a horizontal scroll, or other elements which have 100% widths (in order to span the page, such as a banner) to fall short of the full page width.

I suppose using a media query specific to the device width in order to give all images the the max px width after adding up my total margins % paddings would work, but I'd rather use the calc values, if for nothing else, that I'm annoyed I can't use them.

Here's a link to a codepen: https://codepen.io/spicedham/pen/qMKLYq Additional info: I have access to data-height and data-width attributes, but I can not wrap image in a container.

like image 565
Eric Avatar asked Nov 06 '25 18:11

Eric


1 Answers

If you only want to set one dimension for an image, set the other dimension to auto. The browser will handle the proportions. The following should work for you:

img {
  width: calc(100% - 60px);
  height: auto;
}
like image 61
thirdender Avatar answered Nov 09 '25 14:11

thirdender



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!