在Chrome DevTools中运行Lighthouse,它显示需要改善CLS(累积布局移位)。
我知道现代浏览器现在根据图像的width
和height
属性设置默认的宽高比。因此,最佳实践是要设置width
和height
属性,以防止布局移位。
尽管如此,我没有设置width
和height
属性,因为这是我唯一能让其按照我想要的方式工作的方法(请查看下面的代码)。
由于我的图片是WebP格式(带有png回退),我被迫使用<picture>
元素(以便不支持WebP的浏览器获得图像的png版本)。请注意,我正在使用不同大小的相同图像版本。
因此,如果我没有使用WebP格式,我将仅使用<img>
而不是<picture>
。然后,由于纵横比,问题将会解决。
正如您在下面的代码片段中所看到的,在此特定示例中有两个版本的相同图像。在<img>
中设置width="245"
和height="600"
会导致我两个不同大小的相同图像版本都达到最大的245 x 600px尺寸(当然会按照较小的视口缩小)。对于更宽的视口(min-width:813px),根据我的媒体查询,我正在提供较大版本的相同图像,但在<img>
中设置width
和height
时,图像缩小为245 x 600px。
现在是我的问题/问题; 如果可能,如何在<picture>
元素内设置<img>
元素的width
和height
属性以避免布局移位(并获得其他好处,例如更快的加载时间)?因此,如何让浏览器使用纵横比正确显示我的图像?
我真的很感激有人指导我。
谢谢/卡尔
<picture>
<source
media="(max-width: 812px)"
srcset="image-245w.webp"
type="image/webp"
>
<source
media="(min-width: 813px)"
srcset="image-332w.webp"
type="image/webp"
>
<source
media="(max-width: 812px)"
srcset="image-245w.png"
type="image/png"
>
<source
media="(min-width: 813px)"
srcset="image-332w.png"
type="image/png"
>
<img class="img-fluid" src="image-245w.png" alt="image">
</picture>
width="600"
,但从技术上讲这是无效的。600是什么?宽度= 600个香蕉?西红柿?...您还需要命名一个单位,例如px,vw / vh,em,%
... - tacoshy<source>
元素定义了width
和height
属性。https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element。当它被用在`<picture>`元素中时。但是我没有测试过这是否会在没有CLS的情况下工作。 - Leif Marcus