Как использовать значение width для height на css calc()?

Question

[k-2]

Можно ли получить ширину блока и применить ее для высоты?

Как то так:
height: calc(width * 2);

Answer 1

[Ankhena]

Да, можно, например, с помощью псевдоэлементов. Блок всегда заданных пропорций (высота считается как % от ширины): https://jsfiddle.net/Ankhena/cLhxv7eq/
В примере всегда квадратный блок, для изменения пропорций нужно изменять %%

Через переменные не получится, потому что:
либо мы знаем ширину в точках или vw - тогда не нужен calc
либо она у нас в процентах - получим проценты, но проценты эти будут от высоты родителя, а не ширины. (Собственно для умножения процентов тоже не нужен calc)

Comments

[Ankhena]

k-2 calc имеет смысл, если мы хотим сложить, например, % и пиксели. Потому что не знаем 90% это сколько пикселей на данный момент.
Если мы хотим 90% умножать на 2, то в состоянии сразу написать 180%, а не напрягать браузер излишними пересчетами.
Кроме того, если ширина 90%, а высоте мы зададим 180%, то не получим высоту в 2 раза больше ширины.

А вот вариант задавать высоту через vw может помочь.

[k-2]

Магия какая то. как оно работает вообще понять не могу.

[Ankhena]

k-2, со смартфона не удобно делать примеры jsfiddle
Доберусь до компа сделаю.

Самый лучший способ самостоятельно сделать себе несколько элементарных примеров на calc и как работают проценты, в каких случаях и от чего высчитываются.

[Ankhena]

k-2, вот, нашла статью с примерами: https://habrahabr.ru/post/243821/

[k-2]

Ankhena, Большое спасибо!!! Надо поближе познакомиться с псевдоэлементами. Во многих случаях можно не использовать js, сделать это на css.

Answer 2

[Александр Филиппенко]

Нет, но можно получить ширину экрана (если это как-то поможет).
Например
height: calc(65vw - 50px); Я так видео с ютуба в адаптиве вставлял.

Answer 3

[one_day]

#calcWidth {
  --width: 100px; /* создать переменную с шириной */
}

#calcHeight {
  height: calc(var(--width) * 2); /* применить переменную */
}

Comments

[k-2]

а если создадим переменную
--width: 90 %;

тогда не получится ее применить? Только пиксели можно?

Answer 4

[xxxgeniy]

.wrap{position:relative; overflow:hidden; float:left; width:25%; //height:auto; }
.wrap::after {
content:'';
display:block;
padding-top:150%; - пропорция 1 к 1.5
}
и абсолютом внутрь объекта что нужно, работает от 9 ие и выше