È possibile utilizzare calc calc() per calcolare un rapporto larghezza/altezza?

Question

Questo è il codice che ho attualmente (non funziona ancora):

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; 
} 

Questa è un'immagine centrata sfondo reattivo - il contenitore dovrebbe avere una larghezza/altezza variabile e non voglio usare jQuery.

proprietà note:

Rapporto: 1280: 270

Altezza minima: 100px

Altezza massima: 270px

Larghezza massima: 1280px

Quello che ho provare a fare è calcolare l'heig del contenitore ht di .chi_display_header magicamente con calc:

height = calc (CURRENT_SCREEN_WIDTH * 270/1280);

Tuttavia il mio approccio attuale

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

non funziona ancora. C'è una soluzione CSS?

Answer 1

Solution (Ty 4 commenti):

.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

ho applicato la soluzione di Blackbam alla situazione in cui un div è stata posta nel corpo e il corpo aveva lasciato e imbottitura destra di 15px. Sottraendo il padding sinistro e destro totale (30px) dallo spazio bianco rimosso in altezza calcolato che è apparso sopra e sotto il div.

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

Answer 3

E 'possibile farlo anche senza calc(). padding (anche -top e -bottom) sono relative alla larghezza dell'elemento, in modo da poter ottenere lo stesso effetto in tal modo:

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

È inoltre possibile aggiungere elementi all'interno di un interno <div> utilizzando il trucco relativo/assoluto, anche se le cose andranno cominciare a andare storto se il contenuto supera l'altezza contenente:

.chi_display_header { 
    ... 
    position: relative; 
} 

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