響應式網頁設計中的寬度與最大寬度

Question

在教程中，建議您在響應式網頁設計中使用最大寬度：100％來使圖像更加靈活。爲什麼我們可以使用寬度：100％用於此目的？

Answer 1

較小的圖像，例如200px寬的圖像將始終擴展到父容器的寬度，在較大的屏幕上可能會更寬。因此，由於可見的僞像，最終會出現放大的圖像，這些圖像很少看起來不錯。

Answer 2

我有同樣的問題，我認爲這是做一個小實驗後回答：

width:100%;縮放圖像的寬度無論發生什麼事情。

• 當100%大於該圖像的原始分辨率時，圖像保持縮放並因此看起來模糊。
• 當height被分配給該圖像時，寬度不斷縮放並因此變得拉伸。

max-width:100%;更仔細地縮放圖像的寬度。

• 當100%比圖像的原始分辨率越大，圖像縮放停止，看起來細膩。
• 當height被分配給該圖像時，寬度停止縮放並保持高寬比。

所以我認爲這就是人們使用max-width而不是width的原因。實驗

截屏：here（草圖圖像是600像素* 432像素）的實驗

網頁：here