Question

为了让响应式图像在小屏幕上按比例缩小，我目前使用max-width: 100%;（或固定的最大宽度）。与指定固定大小相反，这有一个可怕的缩小，因为当页面加载时，浏览器不为图像分配空间，只能在开始下载后才这样做。在加载所有图像之前，这会导致大量的布局重排和糟糕的体验。

这似乎很容易修复 - 毕竟，我只需告诉浏览器实际大小是什么，以便在下载之前可以找出宽高比和最终大小。首先，我想知道这是width和height html属性的用途，但我知道这不是他们的目的，因为它们可用于重新缩放图像并更改最终大小。

我真正想要的是像“srcwidth”和“srcheight”之类的东西，它会告诉浏览器图像文件的实际大小，以便在知道方面之前不必加载使用max-width样式的比率。但是根据我的发现，没有像这些属性这样的东西。真的没有办法实现这个目标吗？

我尝试以这种方式使用实际的width和height html属性，然后用CSS覆盖它，但浏览器根本不关心它。

Answer 1

我看到的最常见的方法是将所有图片放入容器中，并使用padding-bottom属性来预先分配＆＃34;高度。

<div class="responsive-container">
    <img src="image.jpg"/>
</div>

为此，您需要知道图像的纵横比以计算填充。

使用宽高比计算高度

例如，对于宽高比为16：9（例如800 x 450px），高度为宽度的56.25％，因此将为填充值。

.responsive-container {
    width: 100%;
    padding-bottom: 56.25%; /* 9/16 = aspect ratio of image */
    position: relative;
    height: 0;
    overflow: hidden;
}

.responsive-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

不同的方面比率

如果您的图像具有不同的宽高比，但您仍然会提前知道，则为每个图像设置不同的类别，例如

.responsive-container {
    width: 100%;
    position: relative;
    height: 0;
    overflow: hidden;
}

.ratio-16-9{
    padding-bottom:56.25%; /* 9/16*100 */
}

.ratio-4-3{
    padding-bottom:75%; /* 3/4*100 */
}

.ratio-1-1{
    padding-bottom:100%; 
}

并在html中使用它：

<div class="responsive-container ratio-16-9">
    <img src="image.jpg"/>
</div>

动态计算高度

最后，如果您希望CSS动态计算每个图像的高度，您可以使用CSS calc()来计算高度，如下所示：

calc((image_height/image_width)*100%)

所以你的CSS将是： .responsive-container { 宽度：100％; 位置：相对; 身高：0; 溢出：隐藏; }

你这样使用它：

<div class="responsive-container" style="padding-bottom: calc((426/640)*100%);" >
    <img src="image.jpg"/>
</div>

<强>参考

响应式img无需重排

1 个答案: