レスキューimg srcsetはランドスケープモードでスケーリングしません

Question

私は最近、次のように作成しましたwebsite。サイトはすべての画像でimg srcsetを使用します。

デバッグ中に、私はホームページでポートレートモードとランドスケープモードを切り替えると、トップフル幅の画像がビューポートを満たしていないことを発見しました。風景モードでページを更新すると、正しいスケーリングが表示されます。

私は、応答性の私のイメージを作成するには、以下のCSSを使用しています：

img { 
    height: auto; 
    max-width: 100%; 
} 

それは私がこれのために2つのイメージを持っていることに注意することが重要です。ビューポートが600px以下の場合、正方形の画像が表示されます。 600ピクセルを超えるものと全幅画像が表示されます。これはCSSでdisplay: block;とdisplay: none;で制御されています。

私はBrowserstackでエミュレートできませんが、SafariとChromeの物理デバイス（iPhone 6）で問題をエミュレートできません。

imgタグの幅と高さが宣言されていれば役に立ちますか？

Answer 1

なぜmin-widthを使用しないのですか？

問題は、要素の幅は定義していませんが、要素の幅はmax-widthです。この場合、オリジナルの画像ベースはその幅になります。ただmin-width: 100%;

img { 
    height: auto; 
    min-width: 100%; 
    max-width: 100%; 
}