如何保持由max-width，max-height构成的div形状？

Question

我需要div保持所需的形状（宽度/高度比例），例如正方形，同时div应该在设定的限制范围内尽可能多地占据父容器，例如最多占高度的90％，高达宽度的60％。我可以借助javascript来实现它，但我希望看到CSS解决方案。

mDatabase = FirebaseDatabase.getInstance().getReference().child(id).child(marks);

$(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;
}

Answer 1

不确定我是否完全理解这个问题，但是只有一种CSS方式可以在设置流体宽度时保持长宽比。

您可以按百分比设置宽度，并将padding-bottom设置为百分比以添加高度。

这将使宽高比与调整大小时的宽度相同。

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

Example Codepen。

您可能需要弄乱填充底部的百分比，直到它符合所需的宽高比为止。