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

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

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.

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

соотношение: 1280: 270

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

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

максимальная ширина: 1280 пикселей

что я пытаюсь сделать, это рассчитать высоту контейнера .chi_display_header волшебным образом с calc:

height = calc (CURRENT_SCREEN_WIDTH * 270 / 1280);

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

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

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

9
calc css css3

3 ответов

решение (Ty 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;
}
9

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

height:calc(100vw * aspect_ratio - 30px);
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;
}
1