6

srcsetおよび属性を使用している場合でも、フォールバックとして属性sizesを指定すると便利です。src同様に、古いブラウザーでもwidthandheight属性が指定されていればそれを利用していたと思います。しかし、最新のブラウザはどうですか?

例えば：

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

この例では、最新のブラウザに使用する属性widthと属性はありますか?height

4

1 に答える 1

5

実験に基づいて、CSS プロパティをピクセル単位で指定したかのように動作しwidthますheight。ただし、独自の 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およびHTML 属性を使用して、画像をダウンロードする前に画像の縦横比を判断することを期待していたので、これは少し残念です。height

于 2016-05-09T21:27:23.417 に答える