Höhe basierend auf Breite mit CSS definieren

Question

Ich muss die Höhe eines Elements auf 2/3 seiner Breite einstellen. Ich weiß, ich kann dies mit JS in so etwas wie $(this).height($(this).width()/3*2)

kann ich das gleiche mit geraden CSS ohne Pre-Prozessoren tun?

Answer 1

Sie könnten das Element auf height: 0;padding-bottom: 66.67% setzen, aber dann müssen Sie alle untergeordneten Inhalte absolut positionieren. Ob das praktisch ist, hängt davon ab, was sich in dem Element befindet.

Answer 2

yep es ist ein beliebter Hack für diese

aber jetzt haben wir CSS-Variablen/benutzerdefinierte Eigenschaften, können Sie diese verwenden. nicht vollständig unterstützt, obwohl

.p{ 
 
    width: 60px; 
 
} 
 

 
.c { 
 
    background-color: cyan; 
 
    width: 100%; 
 
    padding-top: 150%; 
 
} 
 

 
/* advanced css custom properties */ 
 
.a { 
 
    --width: 60px; 
 
    width: var(--width); 
 
    height: calc(var(--width)*1.5); 
 
    background-color: rebeccapurple; 
 
}

 
<!-- hack using padding --> 
 
<div class="p"> 
 
    <div class="c"> 
 
     
 
    </div> 
 
    </div> 
 
    <br> 
 
    
 
    <!-- advanced css using custom properties/ css variables --> 
 
    <div class="a"></div>