コンテナ要素のimg srcsetのサイズを修正しますか？

Question

LazySizesプラグイン（https://github.com/aFarkas/lazysizes）を使用しています。イメージのグリッドを構築しようとしていますが、それぞれ小さいビューポートの代替バージョンがあります。グリッド（コンテナ）は、単純な列/行ベースのパーセンテージベースのレイアウトです。

イメージを宣言する方法がわかりません。より大きなバージョンのみを見ています。高解像度画像を使用し、コンテナの最大幅で50％縮小することを選択しました。

<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 100vw" 
    data-src="images/grid/image-small.jpg" 
    data-srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w" 
    alt="" class="lazyload" /> 

私は768pxにある1つのブレークポイントのみ必要です。混乱する部分はdata-sizes属性です。画像は高解像度であるため、ここで別のサイズを宣言する必要がありますか、それとも全幅にする必要がありますか？

を追加しました：生成されたスクリプトが開始したときに私が手のマークアップ：ここ

<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px" 
    data-src="images/grid/image-small.jpg" 
    data-srcset="images/grid/image-small.jpg720w, images/grid/image-big.jpg 1440w" 
    alt="" class=" lazyloaded" 
    sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px" 
    srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w" 
    src="images/grid/image-small.jpg"> 

Answer 1

srcset仕様の作者。

まあ、あなたの現在のsizes属性は役に立たない。両方のブレークポイントに同じサイズを指定するだけで、どちらもデフォルトのサイズを指定するだけです。

なぜあなたは変わったサイジングハッキングをしようとしていますか？あなたは<img>がやろうとしていることと戦っているので、あなたが何をしてもハッキーになります。

sizesには、イメージがページ内にどれくらいの大きさであるかを宣言する必要があります（既定値は100vwなので、既にイメージの全幅になっている場合は省略することができます）。レスポンシブデザインを行い、異なるレイアウトでイメージのサイズを変更する必要がある場合は、ここでMQを使用できますが、サイズが常に同じであれば、複雑なことはありません。

次に、画像の大きさを `srcset 'に宣言してください。あなたがすでにそれをやっているように見えるので、それは良いです（あなたの画像は実際に720ピクセルと1440画像ピクセル幅であると仮定します）。ブラウザは、その情報に基づいて必要なイメージを選択します。

画像をどのように使用するかは100％はっきりしていませんが、画面の半分の幅で画像を表示するように思えますか？その場合は、sizes=50vwを使用すれば、すべてが自動的に処理されます。

（私はLazySizesがどのように動作するのかわからないので、何か変なことをしていると私はそれを手伝うことができません）