Как задать зависимость между width и height в css (или sass)?

Question

[Заур Ашурбеков]

Здравствуй, Хабр!
Вопрос ясен, наверное. Почитал про резиновую верстку, а ответа так и не нашел.

Answer 1

[Сергей Протько]

Если на уровне less/sass то как-то так (пример на less):

@width: 100px;
@height: @width * 0.5; // для соотношения 1 к 2-м.

Если на уровне отображения блока, что бы блок увеличивал пропорционально свои размеры, то тут только относительно ширины блока-родителя при помощи вертикальны паддингов и нулевой высоты.

.my-flexible-box {
    width: 100%;
    height: 0;
    padding-top: 50%; // устанавливает внутренний отступ в 50% от ширины блока-родителя
}

Answer 2

[Роман Мисюра]

CSS calc

Comments

[croupier]

только если вам не важны пользователи android caniuse.com/#search=calc