如何保持由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百分比，直到它符合所需的寬高比。