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.