“ srcset”和“ sizes”属性之间是什么关系?

问题描述

假设我在下面使用此<img>元素(代码摘自MDN):

<img srcset="elva-fairy-480w.jpg 480w,elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

如您所见,srcset属性中有两个选项,sizes属性中有两个选项。但是那些可以不同吗? srcset可以是2,sizes可以是3,还是相反?

解决方法

srcset列出了可用的图像文件,而sizes定义了不同断点处的图像渲染尺寸,因此每个项目中可以有非常不同数量的项目。

例如,您可能会有更多可用的图像(在这里,我们为密度至少为2dppx的大屏幕添加了一个图像):

<img srcset="elva-fairy-480w.jpg 480w,elva-fairy-800w.jpg 800w,elva-fairy-1600w.jpg 1600w"
     sizes="(max-width: 600px) 480px,800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

sizes取决于页面在视口宽度上的各种布局,因此您经常有sizes项与不同布局一样多。

相关问答

错误1:Request method ‘DELETE‘ not supported 错误还原:...
错误1:启动docker镜像时报错:Error response from daemon:...
错误1:private field ‘xxx‘ is never assigned 按Alt...
报错如下,通过源不能下载,最后警告pip需升级版本 Requirem...