CSS img 最大寬度：100%

Question

如果我們為一個圖像元素指定 max-width: 100%（例如一個 250px * 500px 的圖像）並且我們把這個圖像放在一個寬度為 1000px 的父元素中，那么如果父元素縮小 <= 500px，則圖像將是相應地縮小以占據父級的全長。 但是，如果父級的寬度大於 500 像素，則圖像不會被放大，而是在原來的 500 像素。

讓我困惑的是這里 100% 的含義。 據我了解，相對百分比始終與其父級有關。 那么這不是說最大寬度總是其父級的當前寬度嗎？ 所以圖像總是會縮小/放大以適應其父母，因為最大寬度是 100%？ 我在這里有什么誤解？ 在這種情況下如何理解 max-width 中使用的相對百分比？ 它與什么有關？ 謝謝！

Answer 1

是的， width和max-width之間存在差異。

w3school 的這個定義會讓你很容易理解。

https://www.w3schools.com/cssref/pr_dim_max-width.asp

max-width屬性定義元素的最大寬度。

如果內容大於最大寬度，它會自動改變元素的高度。

如果內容小於最大寬度，則 max-width 屬性無效。

注意：這可以防止width屬性的值變得大於max-width 。 max-width屬性的值會覆蓋width屬性。

現在提出您的問題，如果您將max-width替換為width並檢查圖像的寬度是否有 >=500px 或 <500px 的斷點，它當然會占用父母的全寬。

但是正如上面定義中提到的， max-width確保元素寬度不會 go 超過一定寬度（無論父寬度是多少），這就是引入此屬性的原因。