Сделать ширину элемента относительно его высоты?

Question

Я знаю, что возможно specify an element's height relative to its width, потому что процентный запас и значения прокладки вычисляются относительно его ширины. Можно ли сделать противоположную ширину относительно высоты?

Answer 1

Я нашел один способ сделать это без Javascript. Сделайте изображение с коэффициентом и вставьте его в HTML, масштабируя его соответствующим образом, чтобы родительский элемент мог inline-block соответствовать размеру изображения.

<!-- height of the outer container --> 
<div style="height: 200px"> 

    <!-- this will resize to 200px and maintain its aspect ratio ---> 
    <div style="display: inline-block; position: relative;"> 
     <img src="aspectratio.png" style="height: 100%; width: auto;" /> 
     <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"> 
      <!-- Everything in here can party on the fact that their parent 
       has the correct aspect ratio --> 
     </div> 
    </div> 

</div>