画像ができるだけ大きく拡大されるスライドショーのようなものがありますが、ビューポートの幅または高さを超えません。基本的にobject-fit: contain。
私はこれらの画像をレスポンシブにしたいと考えています。なぜなら、電話と非常に大きなデスクトップの場合、「できるだけ大きく」することは大きな違いだからです。<img srcset>現在、画面密度（x記述子）または幅（記述子）のみを行うため、使用できませんw。その<picture>ため、手動で選択ロジックを自分で作成する必要があります。
私はから始めました：
<picture>
<source media="(orientation:portrait)"
sizes="(max-width: 1200px) 100vw, 1200px"
srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w">
<source sizes="(max-width: 1200px) 100vw, 1200px"
srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w">
<img src="default.jpg" alt="a man slipping on a banana peel">
</picture>
しかし、画面の向きほど単純ではありません。実際の縦横比は、ビューポート (非常に背の高い携帯電話、ブラウザーのツールバーなど) と画像自体の両方でかなり風変わりなものになる可能性があるためです。同じ画像でも、ある画面では幅が制限されていても、別の画面では高さが制限されている場合があります。アスペクト比を解析するスクリプトを作成できると思いますが、それを意味のあるリストに変換するロジックに困惑していsrcsetますsizes。