html - 保持 div 的纵横比并应用 max-height 和 max-width

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>