如何保持由max-width，max-height构成的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%;
}

示例Codepen 。

您可能需要弄乱padding-bottom百分比，直到它符合所需的宽高比。