html - 使用 srcset 和 sizes 时 width 和 height 属性有什么作用？

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 HTML 属性来确定图像的宽高比图像，以避免页面加载时后续内容的布局跳来跳去。