加载时没有布局重排的响应图像 [英] Responsive images without layout reflow when they load
问题描述
要在小屏幕上按比例缩小响应图像，我目前使用max-width: 100%;(或固定的最大宽度).与指定固定大小相反，这有一个可怕的减小尺寸，因为在加载页面时，浏览器不会为图像分配任何空间，并且只能在开始下载图像后才能这样做.这会导致大量布局重排，并且在加载所有图像之前会产生不良的体验.
To have responsive images that scale down proportionally on a small screen, I currently use max-width: 100%; (or a fixed max width). As opposed to specifying a fixed size, this has a terrible downsize in that when the page is loading, the browser allocates no space for the image and can only do that after it starts downloading it. This causes a lot of layout reflows and a bad experience before all images are loaded.
这似乎很容易修复-毕竟，我只需要告诉浏览器实际大小是多少，以便它可以在下载之前弄清宽高比和最终大小.首先，我想知道这是否是width和height html属性的用途，但是我知道这不是它们的目的，因为它们可用于重新缩放图像并更改最终大小.
This seems like it could be easily fixed - after all, I just have to tell the browser what the real size is so that it can figure out the aspect ratio and the final size before downloading it. First, I was wondering if that's what the width and height html attributes are for, but I know that that's not their purpose as they can be used to rescale the image and change the final size.
我真正想要的是类似"srcwidth"和"srcheight"之类的东西，它们可以告诉浏览器图像文件的实际大小，以便在知道要使用的宽高比之前不必加载图像文件. max-width样式的样式.但是据我发现，没有像这些属性这样的东西.真的没有办法实现这一目标吗?
What I really want is something like "srcwidth" and "srcheight" that would tell the browser the actual size of the image file so that it doesn't have to load before knowing the aspect ratio to make use of the max-width styling. But from what I could find, there is no such thing like these attributes. Is there really no way to achieve this?
我尝试以这种方式使用实际的width和height html属性，然后用CSS覆盖它，但是浏览器根本不在乎.
I tried using the actual width and height html attributes in this way and then overriding it with CSS, but browsers simply don't care about that.
推荐答案
我看到的最常见的解决方法是将所有图像放入容器中，并使用padding-bottom属性预分配"高度
The most common way I've seen this addressed is to put all your images in containers and use the padding-bottom property to "pre-allocate" the height.
<div class="responsive-container">
<img src="image.jpg"/>
</div>
要执行此操作，您需要知道图像的纵横比以计算填充.
To do this, you need to know the aspect ratio of the image to calculate the padding.
使用宽高比计算高度
例如，对于宽高比为16:9(例如800 x 450像素)的高度，其高度为宽度的56.25％，因此它将用作填充的值.
For example, for an aspect ratio of 16:9 (e.g. 800 x 450px) the height is 56.25% of the width so that will be the value for the padding.
.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%;
}
不同的宽高比
如果图像的宽高比不同，但是您仍然会提前知道，则可以为每个图像设置不同的类，例如
If your images will have different aspect ratios, but you will still know then ahead of time, you set up different classes for each, e.g.
.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中使用它:
And to use it in the html:
<div class="responsive-container ratio-16-9">
<img src="image.jpg"/>
</div>
动态计算高度
最后，如果您希望CSS动态地计算每个图像的高度，则可以使用CSS calc()以这样计算高度:
Finally, if you want the CSS to calculate the height dynamically for each image, you can use CSS calc() to calculate the height like this:
calc((image_height/image_width)*100%)
因此您的CSS将是: .sensitive-container { 宽度:100％; 职位:相对 高度:0； 溢出:隐藏； }
So your CSS would be: .responsive-container { width: 100%; position: relative; height: 0; overflow: hidden; }
您可以这样使用它:
<div class="responsive-container" style="padding-bottom: calc((426/640)*100%);" >
<img src="image.jpg"/>
</div>
参考
- Responsive images – how to prevent reflow
- Responsive Images Without Browser Reflow
- MDN Web Docs for CSS calc()
这篇关于加载时没有布局重排的响应图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
