Можно ли использовать 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

Минимальная высота: 100 пикселей

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

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

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

высота = расчет (CURRENT_SCREEN_WIDTH * 270/1280);

Однако мой текущий подход

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

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


css calc
person Blackbam    schedule 04.05.2016    source источник
comment
Связано: stackoverflow.com/questions/1495407/   -  person Aziz    schedule 04.05.2016
comment
100vw - это полная ширина, а не 1vw   -  person circusdei    schedule 04.05.2016
comment
@aziz - есть ли решение с кальцием?   -  person Blackbam    schedule 04.05.2016
comment
@circusdei правильно..... может быть, это работает почти с этим, немного обрезано с размером фона: обложка работает с небольшим обрезанием   -  person Blackbam    schedule 04.05.2016

Ответы (3)


arrow_upward
11
arrow_downward

Решение (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;
}
person Blackbam    schedule 05.05.2016

arrow_upward
3
arrow_downward

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

height:calc(100vw * aspect_ratio - 30px);
person LJaeren    schedule 29.11.2016

arrow_upward
2
arrow_downward

Это можно сделать и без 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;
}
person rgchris    schedule 10.01.2017