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

Question

如果我们使用srcsetand属性，将属性指定为后备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和heightCSS 属性一样。但是，它可以被您自己的 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"
>

这有点令人失望，因为我希望现代浏览器会在下载图像之前使用HTML 属性width来height确定图像的纵横比，以避免在页面加载时跟随内容的布局跳来跳去。