html - レスポンシブ イメージ マッピングがスケーリングされたイメージに対して機能しない

Question

レスポンシブ画像機能にはpicturefill.jsを使用しています。高さと幅を指定せずに元の画像を配置すると、画像が<picture>タグに表示され、画面サイズに応じて同じ画像の異なるサイズが表示されます。

しかし、高さと幅を指定すると、レスポンシブ機能が機能しません。画像は<img>タグ付きで読み込まれます。

ここにリンクがあります

Answer 1

ライブラリのドキュメントでは、サイズ タグを使用して画像サイズを管理する必要があると説明しています。

<img
  sizes="(min-width: 40em) 80vw, 100vw"
  srcset="examples/images/medium.jpg 375w,
          examples/images/large.jpg 480w,
          examples/images/extralarge.jpg 768w"
  alt="…">

幅と高さでスタイルを定義することにより、画像にその側面を維持させます。

サイトから:

サイズ構文は、レイアウト内で画像が占有するスペースを定義するために使用されます。次に srcset は、画像のリストとその固有の幅を定義します。これにより、ブラウザーは、ビューポート サイズだけではなく、レイアウトのその部分で使用可能なサイズに適した最小のソースを選択できます。