Можно ли использовать CSS calc() для расчета отношения ширины/высоты?

Question

Это код, который я в настоящее время (он еще не работает):

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

Это центрированный отзывчивым фон образ - контейнер должен иметь переменную ширину/высоту, и я не хочу использовать jQuery.

Известные свойства:

Ratio: 1280: 270

Минимальная высота: 100px

Максимальная высота: 270px

Максимальная ширина: 1280px

Я попытайтесь сделать это, чтобы вычислить контейнерный хвост ht of .chi_display_header magically with calc:

высота = calc (CURRENT_SCREEN_WIDTH * 270/1280);

Однако мой нынешний подход

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

пока не работает. Есть ли решение для CSS?

Answer 1

Solution (конфорок 4 комментариев):

.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

я применил решение Blackbam к ситуации, когда DIV был помещен в тело и тело влево и вправо отступы 15px. Вычитая общее левое и правое заполнение (30 пикселей) из вычисленной высоты, удаленное белое пространство, появившееся выше и ниже div.

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

Answer 3

Это можно сделать без calc(). padding (даже -top и -bottom) по сравнению с шириной элемента, так что вы можете получить тот же эффект, таким образом:

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

Вы также можете добавить элементы внутри с внутренним <div> с использованием относительного/абсолютного трюк, хотя все будет начинают идти наперекосяк, если содержание превышает высоту, содержащую:

.chi_display_header { 
    ... 
    position: relative; 
} 

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