Как сделать aspect-ratio на основе переменных?
У меня есть значения ширины и высоты элемента в css-переменных
--w: 100px; --h: 50px; |
--w: 100px; --h: 50px;
или
--w: 100; --h: 50; |
--w: 100; --h: 50;
С их помощью я хочу задать элементу aspect-ratio, но не используя одноименное css-свойство, а с помощью padding-top/botton. Но столкнулся с тем, что не знаю, как получить нужное значение в процентах.
div::before { content: ''; display: block; padding-top: calc(var(--h) * 100% / var(--w)); } |
div::before { content: ''; display: block; padding-top: calc(var(--h) * 100% / var(--w)); }
Данная запись не работает, так как если правильно понимаю, вместо 100% браузер пытаеться подставить значение padding, а мне нужна просто конвертация px -> %
Реализуемо это на css?
Дополнительно:
Реализуемо это на 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%); } |
: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%); }
- Хотя тут та же ошибка, что допустил и я, но ваш пример помог разобраться.
Нашел в спецификации, что делитель в calc должен быть числом. То есть без 'px' в переменных все работает.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания aspect-ratio на основе переменных в CSS, можно воспользоваться псевдоэлементами и псевдоклассами. Ниже приведен пример решения задачи с использованием переменных в CSS:
1. Создайте переменные для ширины и высоты элемента:
```html
<div class="aspect-ratio" style="--width: 16;--height: 9"> Content </div>
```
2. Определите стили для элемента с использованием переменных:
```html
.aspect-ratio { position: relative; width: 100%; } .aspect-ratio::before { content: ''; display: block; padding-top: calc(var(--height) / var(--width) * 100%); }
```
3. Для элементов с фиксированным aspect-ratio добавьте соответствующие классы:
```html
<div class="aspect-ratio aspect-ratio-16-9"> Content </div>
```
4. Определите стили для классов с фиксированным aspect-ratio:
```html
.aspect-ratio.aspect-ratio-16-9 { --width: 16; --height: 9; }
```
Теперь вы сможете создавать элементы с различными aspect-ratio на основе переменных в CSS. Не забудьте подключить поддержку пользовательских свойств (--*) для браузеров, которые их не поддерживают.