加载时没有布局重排的响应图像 [英] 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屋!