javascript - 我怎样才能保持由最大宽度、最大高度构造的 div 的形状？

Question

我需要 div 保持所需的形状(宽度/高度比例)，例如正方形，同时 div 应在设定的限制内尽可能多地占据父容器，例如高达 90% 的高度和高达宽度的 60%。我可以在 javascript 的帮助下实现它，但我想看看 css 解决方案。

$(document).ready(function() {
  var a = Math.min($('div').width(),$('div').height());
  $('div').width(a).height(a);
});

html,body {
  height:100%;
}

div {
  max-width:60%;
  max-height:90%;
  height:100%;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Answer 1

不确定我是否完全理解这个问题，但是只有一种 css 方法可以在设置流动宽度的同时保持纵横比。

您可以设置百分比宽度，并使用 padding-bottom 设置百分比来增加高度。

这将使纵横比与调整大小时的宽度变化保持一致。

div {
  width: 33.33%;
  float: left;
  border: 1px solid grey;
  padding-bottom: 20%;
}

Example Codepen .

您可能需要调整 padding-bottom 百分比，直到它符合您想要的纵横比。