如何使用 calc (width - X) 保持图像比例

Posted 2023-03-29

【中文标题】如何使用 calc (width - X) 保持图像比例

【英文标题】：How to keep image proportion using calc (width - X)

【发布时间】：2013-01-31 21:30:21

【问题描述】：

我知道仅以百分比指定宽度或高度将使图像保持正确的比例，但是，如果我尝试类似的方法似乎：

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

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

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

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

有谁知道使用 CSS 或一些轻量级 js 的方法来使用 calc 单位，同时保持正确的比例？

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

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

这里是 codepen 的链接：https://codepen.io/spicedham/pen/qMKLYq 附加信息：我可以访问 data-height 和 data-width 属性，但我无法将图像包装在容器中。

【参考方案1】：

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

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

【讨论】：

这里最好使用max-width而不是width，以免放大小图。