响应式布局中图片比例的解决方案

Question

简而言之就是问题所在：

我们有一个响应式布局，可以根据屏幕宽度缩放我们的图像。对于窄/小屏幕，我们调整为两列布局；对于更宽的屏幕或横向平板电脑，我们可以轻松地显示四列。都很标准。

图像被定义为包含元素宽度的 100%，高度为 auto。这适用于 IE7+ 的所有浏览器。

问题是在页面加载时浏览器不知道图像的高度。因此，在加载每个图像时都会进行很多重排/重绘。事实上，它们大多是正方形的，但是没有办法向浏览器提示它们中的任何一个的比例。因为我们提供了很多图像，这会导致页面渲染速度变慢。在处理能力较低的设备上，例如旧 iPhone，我猜它也会占用很多不必要的 CPU。

一个可能的 javascript 解决方案是根据页面大小将规则注入到 css 中；不过，这可能会涉及重新绘制整个页面。这并不理想。

我的问题是：是否有一个优雅的解决方案来暗示图像的纵横比，从而在使用图像加载之前允许页面“形状”或多或少正确响应式（百分比宽度缩放）图像。

此处的演示页面：http://www.partyark.co.uk/christmas-presents.html - 尝试调整屏幕大小以查看图像缩小/放大。最小尺寸为 145 像素，最大为 200 像素。

Answer 1

有一个pure CSS technique 首先由 Thierry Koblentz 描述。它基于具有position: relative、零高度和具有百分比大小的padding-bottom 的包装器。填充的百分比适用于包含块的宽度，因此您可以使用流畅的布局实现任意纵横比。然后你可以把你的图像放在这个包装器中，绝对定位，宽度和高度为 100%。 4:3 纵横比示例：

.wrapper-with-intrinsic-ratio {
    position: relative;
    padding-bottom: 75%; /* results in 4:3 aspect ratio */
    height: 0;
}

.element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}