Czy można użyć CSS calc() w celu obliczenia stosunku szerokości do wysokości?

Question

Jest to kod, który obecnie mam (to jeszcze nie działa):

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

Jest to skoncentrowane reaguje tła - pojemnik na powinien mieć zmienną szerokość/wysokość i nie chcę używać jQuery.

Znane właściwości:

Ratio: 1280: 270

Minimalna wysokość: 100px

Maksymalna wysokość: 270px

Maksymalna szerokość: 1280px

Co ja postaraj się obliczyć wysokość pojemnika ht .chi_display_header magicznie z calc:

wysokość = calc (CURRENT_SCREEN_width * 270/1280);

Jednak moje obecne podejście

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

jeszcze nie działa. Czy istnieje rozwiązanie CSS?

Answer 1

Solution (ty 4 komentarze):

.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

zastosowałem rozwiązanie Blackbam do sytuacji, w której div został umieszczony w organizmie, a ciało w lewo i prawo wyściółka z 15px. Odjęcie całkowitej lewej i prawej padding (30px) od obliczonej wysokości usunięto białą przestrzeń, która pojawiła się powyżej i poniżej div.

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

Answer 3

Można to zrobić również bez calc(). padding (nawet -top i -bottom) są w stosunku do szerokości elementu, dzięki czemu można uzyskać ten sam efekt w następujący sposób:

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

Można także dodawać elementy wewnątrz z wewnętrznej <div> podstawie względnej/bezwzględnej tricka, choć rzeczy zaczynają się nie udać, jeśli zawartość przekracza wysokość zawierającą:

.chi_display_header { 
    ... 
    position: relative; 
} 

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