Ist es möglich, CSS calc() zu verwenden, um ein Verhältnis Breite/Höhe zu berechnen? Dieser

Question

ist der Code, den ich zur Zeit (es funktioniert noch nicht):

HTML:

<div class="chi_display_header" style="background-image:url('http://localhost/.../header-dummy-small.png');"></div> 

CSS:

.chi_display_header { 
    background-size:contain; 
    width:100%; 
    min-height:100px; 
    height:calc(1vw * 270/1280px); 
    max-height:270px; 
    max-width:1280px; 
    margin:0 auto; 
} 

Dies ist eine zentrierte ansprechende Hintergrundbild - der Behälter sollte eine variable Breite/Höhe haben und ich möchte nicht jQuery verwenden.

Bekannte Eigenschaften:

Verhältnis: 1280: 270

Mindesthöhe: 100px

Maximale Höhe: 270px

Maximale Breite: 1280px

Was ich versuchen Sie es zu tun ist die Containerhöhe zu berechnen ht of .chi_display_header magisch mit calc:

Höhe = calc (CURRENT_SCREEN_WIDTH * 270/1280);

aber mein aktueller Ansatz

height:calc(1vw * 270/1280px); 

funktioniert noch nicht. Gibt es eine CSS-Lösung?

Answer 1

Solution (ty 4 Kommentare):

.chi_display_header { 
    background-size:cover; 
    width:100%; 
    min-height:100px; 
    height:calc(100vw * 270.0/1280.0); 
    max-height:270px; 
    max-width:1280px; 
    margin:0 auto; 
} 

Answer 2

I Blackbam-Lösung auf die Situation angewandt, wo ein div in dem Körper gelegt wurde und der Körper hatte links und rechts padding von 15px. Subtrahieren der gesamten linken und rechten Auffüllung (30px) von der berechneten Höhe entferntem Leerraum, der oberhalb und unterhalb des div erschien.

height:calc(100vw * aspect_ratio - 30px); 

Answer 3

Es ist möglich, dies auch ohne calc() zu tun. padding (auch -top und -bottom) sind in Bezug auf die Breite des Elements, so dass Sie kann somit den gleichen Effekt:

.chi_display_header { 
    background-size: cover; 
    width: 100%; 
    min-width: 474px; 
    max-width: 1280px; 
    height: 0; 
    padding-bottom: 21.09375%; 
} 

Sie auch Elemente im Innern mit einer inneren <div> mit dem relativen/absoluten Trick hinzufügen können, wenn die Dinge beginnen schief zu gehen, wenn der Inhalt der enthaltenden Höhe überschreitet:

.chi_display_header { 
    ... 
    position: relative; 
} 

.chi_display_header .inner { 
    position: absolute; 
    top: 0; left: 0; right: 0; 
    padding: 15px; 
}