響應img srcset無法在橫向模式下縮放

Question

我最近建了以下website。該網站在所有圖像上使用img srcset。

在調試過程中，我發現在主頁上的縱向和橫向模式之間切換時，頂部全寬圖像並不像它應該填充視口。如果以橫向模式刷新頁面，則會看到正確的縮放比例。

我用下面的CSS讓我的圖片響應：

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

需要注意的是我對這個兩幅圖像是非常重要的。當視口爲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%; 
}