维持div的纵横比，并应用max-height和max-width

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

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;