Question

这是问题，简而言之：

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

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

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

一个可能的JavaScript解决方案是根据页面大小将规则注入到css中;这可能会涉及重绘整个页面。这不是理想的。

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

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

Answer 1

首先由Thierry Koblentz描述pure CSS technique。它基于包含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%;
}

响应式布局中的图像比率解决方案

1 个答案: