1
のサイズ私は彼が次の例を使用するには、現在のプロジェクトに対応した画像を実装し、this post on CSS-Tricksを参照しています：応答画像：Srcset＆
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
私は指定して、自分のプロジェクトにこのフォーマットを使用のみ交互幅、そして興味深いことにW3C Validatorは私に言っている：
srcset属性が 幅記述子、「サイズ」属性mの任意の画像候補の文字列を持っていますまた、存在している
私は仕様が進化していることを認識しており、これはバリデータの問題のほうが多いかもしれませんが、これが本当に真であるかどうかについて明確な答えを見つけることはできません。私が読んだことから、幅をで指定すると、は最良の選択をするのにブラウザを助けるのに十分であるはずです。
私のプロジェクトでは、Pinterestスタイルのグリッドレイアウトがあり、3列のイメージがブレークポイントで1つにリサイズされています。したがって
<img src="img/tile-320.jpg"
srcset="img/tile-480.jpg 480w, img/tile-720.jpg 720w"
sizes="(min-width: 768px) 33.3vw, (min-width: 568px) 50vw, 100vw"
alt="srcset test">
、私はデフォルト/フォールバックとして320PXバージョンで、3つの画像のサイズを有し、かつ768px後、グリッドは3つの列がありますし、私もsizesマークアップは、この目的のために正しいかどう思ったんだけど; 568pxには2つあり、それ以外の場合は列/イメージはビューポートの幅を埋めると見なすことができます。
私の質問は次のとおりです：（1）幅ベースの代替ソースを指定するときにブラウザに実際にはsizesが必要ですか？ （2）上記の実装でsizesを使用して私のマークアップが正しいですか？
1.サイズが必要です。あなたのサイズは正しいです。しかし、あなたがサイズを理解していれば、それが必要であることは明らかです。物理的な画像の幅だけでは役に立ちません。ブラウザはレイアウト内のイメージの幅も知っている必要があります。サイズがない場合、サイズは100vwに戻ります。 –
@alexanderfarkas、アレクサンダー、ありがとう、それを得た。それは理にかなっている。私は、ブラウザが画像コンテナおよび/または表示サイズを "把握"し、それらの計算に基づいて適切なソースを選択することを、特にCSS-Tricksの記事や他の記事から考えてみました。しかし、サイジングパラメータを指定するとブラウザが助けになることは確かに理にかなっています。 – nickpish