Image 如何使用calc（width-X）保持图像比例

我知道，仅指定宽度或高度（以百分比表示）将允许图像保持正确的比例，但是，如果我尝试以下方法：

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

我失去了比例。图像将变窄60像素。然后我试了一下：

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

…但图像仍然无法保持正确的比例

有没有人知道一种使用CSS或一些轻js的方法，在保持正确比例的同时使用calc单位

最终目标是将所有图像放在一个大的（包含每个页面上的大部分内容）div指定的css中，以减小其图像大小，使其适合移动设备（特别是iphone纵向），而不会溢出并导致水平滚动或其他具有100%宽度的元素（为了跨越页面，如横幅）小于整页宽度

我想使用一个特定于设备宽度的媒体查询，在加上我的总边距%填充后，为所有图像提供最大px宽度是可行的，但我宁愿使用calc值，如果没有其他原因，我很恼火我不能使用它们

这里有一个指向代码笔的链接：

---

其他信息：我可以访问“数据高度”和“数据宽度”属性，但我无法将图像包装到容器中。

如果您只想为图像设置一个维度，请将另一个维度设置为“自动”。浏览器将处理比例。以下操作适用于您：

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

---

这里最好使用

max width

而不是

width

，以避免放大小图像。