保持div的高宽比，并应用最大高度和最大宽度。

Question

我试图保持高宽比，但也限制最大的大小。高度似乎没有得到通知。知道为什么吗？

参见下面的代码：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>

​