Imposta la larghezza di un elemento in relazione all'altezza?

Question

So che è possibile specify an element's height relative to its width, perché il margine percentuale ei valori di riempimento sono calcolati in relazione alla sua larghezza. È possibile fare l'opposto - larghezza rispetto all'altezza?

Answer 1

Ho trovato un modo per farlo senza Javascript. Crea un'immagine con il rapporto e incorporalo nell'HTML, ridimensionandolo di conseguenza, in modo che l'elemento genitore possa adattarsi alla dimensione dell'immagine 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>