我知道仅以百分比指定宽度或高度将使图像保持正确的比例，但是，如果我尝试类似的方法，似乎：
img {width: calc(100% - 60px);}
我失去了比例。图像将变窄 60 像素。然后我尝试了这个：
img {width: calc(100% - 60px); height: calc(100% - 60px);}
..但图像仍然无法保持正确的比例。
有谁知道使用 CSS 或可能是一些轻量级 js 的方法来使用 calc 单位，同时保持正确的比例？
最终目标是让所有图像在一个大（包含每个页面上的大部分内容）div 中分配 css 以减小其图像大小以适应移动设备（特别是 iphone 纵向），而不会溢出并导致水平滚动，或其他具有 100% 宽度的元素（为了跨越页面，例如横幅）低于整个页面宽度。
我想使用特定于设备宽度的媒体查询，以便在添加我的总边距 % 填充后为所有图像提供最大 px 宽度，但我宁愿使用 calc 值，如果没有别的，我我很生气我不能使用它们。
这是 codepen 的链接：https ://codepen.io/spicedham/pen/qMKLYq 附加信息：我可以访问 data-height 和 data-width 属性，但我不能将图像包装在容器中。