在媒體查詢中具有100％寬度的圖像

我在寬度爲820px的div內有100％寬度的圖像。當我將圖像縮小到iPad和iPhone 5的屏幕尺寸時，圖像會縮小爲，但在這種尺寸下，我希望圖像爲屏幕尺寸寬度的100％。在媒體查詢中具有100％寬度的圖像

我已經嘗試在媒體查詢中使用100％的寬度，但圖像從不縮放到全寬。

哪種方式最適合在平板電腦和智能手機中以全屏寬度響應圖像？考慮到我使用的網格最大寬度爲960px（骷髏網格：http://www.getskeleton.com/）

謝謝。

2013-04-07 swayziak

如果您正確使用媒體查詢，image **將**縮放到100％，但相對於父元素。所以，小心使圖像的父母在小分辨率上獲得100％的回報。 – 2013-04-07 21:44:06

因此，如果父圖像是寬度爲820px的div，並且此div具有寬度爲960px的父div，則我使用媒體查詢以100％定義這3個元素的寬度？ – swayziak 2013-04-07 21:53:25

就是這樣的。因爲如果要將圖像寬度設置爲屏幕大小的100％，則每個父級必須具有100％的寬度。如果塊元素的寬度未定義，則默認寬度爲100％。 – 2013-04-07 22:06:21

寬度爲100％的圖像將是其父級的100％寬度。所以如果父母的寬度是820px，那麼圖像的寬度就是這麼寬。如果父母的寬度是960像素，那麼這將是圖像的寬度。

因此，您需要更改媒體查詢中父div的寬度（可能與您將圖像設置爲100％寬度的相同）。

2013-04-08 16:19:24 Fernker

所以考慮到我有這樣的結構，HMTL：

，那只有

不具有寬度而定義的，我需要改變2米div的寬度以及媒體查詢中的img？我也改變寬度或最大寬度？ – swayziak 2013-04-08 21:47:48

這是正確的。通常，當我選擇手機尺寸時，我的佈局變得流暢。基本上我所有的div和imgs都設置爲100％寬度。如果你願意，你可以改變最大寬度，這取決於你想要的樣子。 – Fernker 2013-04-09 15:26:36

回答