Отзывчивый img srcset не масштабируется в ландшафтном режиме

Question

Недавно я построил следующее website. На всех изображениях используется img srcset.

Во время отладки я обнаружил, что при переключении между портретным и альбомным режимами на главной странице верхнее полноразмерное изображение не заполняет окно просмотра, как должно. Если вы обновите страницу в альбомном режиме, вы увидите правильное масштабирование.

Я использую следующие CSS, чтобы сделать мои изображения отзывчивы:

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

Важно отметить, что у меня есть два изображения для этого. Квадратное изображение отображается, когда область просмотра 600 пикселей или меньше. Отображается изображение выше 600 пикселей и изображение полной ширины. Это управляется в css с display: block; и display: none;.

Я не могу эмулировать проблему через Browserstack, но могу на физическом устройстве (iPhone 6) в Safari и Chrome.

Помогло ли это, если бы мои img-метки имели ширину и высоту?

Answer 1

Почему бы вам не использовать min-width?

Проблема начинается с того, что вы не определили, какую ширину элемента, но определите, что его max-width. В этом случае ваше изображение основывается на оригинальной ширине.

---

Чтобы понять это просто добавить min-width: 100%;

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