Как сделать aspect-ratio на основе переменных?

Question

[leeroyjenkins176]

У меня есть значения ширины и высоты элемента в css-переменных

--w: 100px;
--h: 50px;

или

--w: 100;
--h: 50;

С их помощью я хочу задать элементу aspect-ratio, но не используя одноименное css-свойство, а с помощью padding-top/botton. Но столкнулся с тем, что не знаю, как получить нужное значение в процентах.

div::before {
	content: '';
	display: block;
	padding-top: calc(var(--h) * 100% / var(--w));
}

Данная запись не работает, так как если правильно понимаю, вместо 100% браузер пытаеться подставить значение padding, а мне нужна просто конвертация px -> %
Реализуемо это на css?

Answer 1

[Михаил Р.]

Реализуемо это на css?

Да (на css3):

:root {
    --w: 300px;
    --h: 200px;
}

// variant one

div {
    width: var(--w);
    height: var(--h);
}

div::before {
    content: "";
    display: block;
    padding-top: calc(var(--h) / var(--w) * 100vh);
}

// variant two 

div::before {
    content: '';
    display: block;
    width: var(--w);
    padding-top: calc((var(--h) / var(--w)) * 100%);
}

Comments

[leeroyjenkins176]

Хотя тут та же ошибка, что допустил и я, но ваш пример помог разобраться.
Нашел в спецификации, что делитель в calc должен быть числом. То есть без 'px' в переменных все работает.