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.
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;
}