我知道仅指定百分比的宽度或高度将允许图像保持正确的比例，但是，似乎如果我尝试类似的操作：
img {width: calc(100% - 60px);}
我失去了比例。图像将变窄 60 像素。然后我尝试了这个：
img {width: calc(100% - 60px); height: calc(100% - 60px);}
..但图像仍然无法保持正确的比例。
有谁知道使用 CSS 或可能使用一些轻量级 js 的方法来使用计算单元，同时保留正确的比例？
最终目标是让所有图像在一个大的（包含每个页面上的大部分内容）div 中分配CSS，以减小图像大小以适合移动设备（特别是 iPhone 纵向），而不会溢出并导致水平滚动，或其他具有 100% 宽度的元素（为了跨越页面，例如横幅）小于整个页面宽度。
我想使用特定于设备宽度的媒体查询，以便在添加总边距 % 填充后为所有图像提供最大 px 宽度，但我宁愿使用计算值，如果没有其他原因，我我很生气我不能使用它们。
这是 codepen 的链接：https://codepen.io/spicedham/pen/qMKLYq https://codepen.io/spicedham/pen/qMKLYq附加信息：我可以访问数据高度和数据宽度属性，但无法将图像包装在容器中。
如果只想为图像设置一个尺寸，请将另一个尺寸设置为auto。浏览器将处理比例。以下内容应该适合您：
img {
width: calc(100% - 60px);
height: auto;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
