divのアスペクト比を維持し、最大高さと最大幅を適用する

Question

アスペクト比を維持しようとしていますが、最大サイズも制限しようとしています。高さはメモを取得していないようです。どんな考え？

この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>

Answer 1

まずあなたが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>