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

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

What do the width and height attributes do when using srcset and sizes?

html

css

responsive-images