保持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>

- sanjihan

---

可能是重复的问题--https://dev59.com/VV4c5IYBdhLWcg3w59qQ - Sahil Dhir

是的，抱歉。 - sanjihan

没问题。在发帖前一定要做好调研工作 =) - Sahil Dhir

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>

- Abhishek Pandey