CSS流動佈局和圖像

Question

我試圖創建CSS完全流動佈局（所有％），這將無縫配合跨平臺（桌面/移動/平板電腦iPad的一樣）。

使用流體佈局，可以使圖像完全流動嗎？例如：

img { max-width:100%; } 

• 這是否意味着它會通過調整/適合任何範圍或窗口的大小？
• 此外，這也可以應用於背景圖像？
• 此屬性在瀏覽器實現方面有什麼限制嗎？

Answer 1

您提供的片段說，最大寬度圖像是100%。這可能意味着不會超過瀏覽器窗口或設備視口。它也可能意味着沒有比相對有分位的父節點更廣泛的範圍。但是，如果窗口足夠大，圖像將以原始大小呈現。

它不能應用於背景圖像，因爲背景圖像本身平鋪或根據原始大小進行定位。 max-width技巧主要用於內容圖像，而不是佈局或樣式圖像。

它是有限，因爲IE6根本不支持它。但是，這個市場非常小並且萎縮，所以也許你可以忽略這個問題。

Answer 2

你的代碼裝置的圖像相對於它的父的寬度的大小。因此，可以說圖像所在的div是500px寬，那麼圖像可能最大寬度爲500px，或者更小，不會更大。有關最大寬度的更多信息，請參閱：W3.org max-width

對於背景，其工作原理有所不同，因此您可以使用background-size: x y;。這是CSS3，舊版瀏覽器不支持。關於背景大小的更多信息：W3.org background-size