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

Question

我知道，只指定宽度或百分比的高度将使图像保持相应的比例，然而，似乎如果我尝试类似：

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

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

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

..但图像仍然不会保留其正确的比例。

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

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

我想使用特定于设备宽度的媒体查询，以便在合计所有图像的最大px宽度之后给出所有图像的总页边空白％填充值，但我宁愿使用calc值，否则，我很恼火，我无法使用它们。

Answer 1

如果您只想为图像设置一个尺寸，请将其他尺寸设置为auto。浏览器将处理比例。下面应该为你工作：

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