max-width、max-height問題
給一個img標簽如下樣式：
img{
max-width:30vw;
max-height:62vh;
}
假設已知圖片為250*480規格，
圖片寬度在 0-30vw之間變化；圖片高度在0-62vh之間變化
當屏幕寬度改變時，圖片寬度也發生改變，但圖片寬度不超過最大寬度，且圖片高度等比縮放；
當屏幕高度改變時，圖片高度也發生改變，但圖片高度不超過最大高度，且圖片寬度等比縮放；
即使沒有顯式說明圖片的width、height，也遵從以下規則
MDN說法：
max-height 這個屬性會阻止 height 屬性的設置值變得比 max-height 更大。
max-height 屬性用來設置給定元素的最大高度. 如果height 屬性設置的高度比該屬性設置的高度還大,則height 屬性會失效.
max-height 重載（覆蓋掉） height, 但是 min-height 又會重載（覆蓋掉） max-height.
實際效果：
當 height 和 max-height一起使用時，誰小聽誰的
max-height < height 元素高度： max-height
height < max-height 元素高度： height
當 height,max-height,min-height一起使用時
height > max-height > min-height 元素高度：max-height
height > min-height > manx-height 元素高度：min-height
min-height > height > max-height 元素高度：min-height
浙公網安備 33010602011771號