如何使用calc保持图像比例（宽度-X）

Question

我知道只指定百分比的宽度或高度将允许图像保持正确的比例，但是，如果我尝试这样的话似乎：

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

我失去了比例。图像将变窄60px。然后我尝试了这个：

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

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

有没有人知道使用CSS或可能是一些轻j的方法来使用计算单位同时保留正确的比例？

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

我想使用特定于设备宽度的媒体查询，以便在将我的总边距加起来之后为所有图像提供最大px宽度％paddings可以工作，但我宁愿使用calc值，如果没有别的，我很生气，我不能使用它们。

以下是codepen的链接：https://codepen.io/spicedham/pen/qMKLYq 附加信息：我可以访问数据高度和数据宽度属性，但我无法将图像包装在容器中。

Answer 1

如果您只想为图片设置一个尺寸，请将另一个尺寸设为auto。浏览器将处理比例。以下内容适用于您：

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