2

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.

1 Answer 1

2

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;
}
1
  • 5
    It is better to use max-width instead of width here to avoid enlarging of small images.
    – ruvim
    Sep 14, 2015 at 8:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.