Question

如果我们使用的是srcset和sizes属性，那么将src属性指定为后备广告仍然很有用。同样，我认为旧的浏览器也会利用width和height属性（如果已指定）。但是做现代浏览器吗？

例如：

<img
   src="foo100x100.jpg"
   srcset="foo100x100.jpg 100w, foo500x500.jpg 500w, foo900x900 900w"
   sizes="100vw"
   width="100"
   height="100"
   alt="example"
>

此示例中的width和height属性是否适用于现代浏览器？

Answer 1

根据实验，它的行为就像您指定了width和height CSS属性（以像素为单位）。但是，它可以被您自己的CSS覆盖。

img {
  width: 200px;
  /* height will be 100px because of the HTML attribute */
}

<img
     src="http://placehold.it/100x100"
     srcset="http://placehold.it/100x100 100w, http://placehold.it/500x500 500w"
     sizes="100vw"
     alt=""
     width="100"
     height="100"
>

这有点令人失望，因为我希望现代浏览器在下载图像之前使用width和height来确定图像的宽高比，以避免布局以下内容在页面加载时跳转。

使用srcset和size时，width和height属性有什么作用？

1 个答案: