保持div的寬高比，並應用最大高度和最大寬度

我試圖保持寬高比，但也限制了最大尺寸。高度似乎沒有得到備忘錄。任何想法爲什麼？保持div的寬高比，並應用最大高度和最大寬度

看到這個codepen： https://codepen.io/timsim/pen/mmRLdq

我的代碼：

* { 
 
    box-sixing: border-box; 
 
} 
 

 
#color-picker { 
 
    width: 15%; 
 
    padding-top: 15%; 
 
    max-height: 150px; 
 
    max-width: 150px; 
 
    background-color: red; 
 
}

<div id="color-picker"></div>

來源

2017-04-27 sanjihan

--http的可能重複：//stackoverflow.com/questions/27420434/max-height-ignored-when-percentage-padding-defines-element-height –

啊這是。關於那 – sanjihan

沒問題..總是在發帖之前做一些調查=） –

首先你拼錯box-sizing和第二件事情，如果padding比元素的高度時，它會增加元素的高度無論您使用的是border-box還是content-box

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#color-picker { 
 
    width: 15%; 
 
    padding-top: 150px; 
 
    max-height: 150px; 
 
    max-width: 150px; 
 
    background-color: red; 
 
}

<div id="color-picker"></div>

來源

2017-04-27 10:59:34

@downvoter，解釋你的downvote。 –

保持div的寬高比，並應用最大高度和最大寬度

回答

相關問題