Как сохранить соотношение сторон у блока css
Обновлено: 07.07.2024
Я работаю с изображениями, и я столкнулся с проблемой соотношения сторон.
Как вы можете видеть, height и width уже указаны. Я добавил правило CSS для изображений:
Но для big_image.jpg я получаю width=500 и height=600 . Как я могу установить изображения для изменения размера, сохраняя их пропорции.
ОТВЕТЫ
Ответ 1
Ответ 2
Приведенные ниже решения позволят увеличить или уменьшить изображение, в зависимости от ширины родительского блока.
Все изображения имеют родительский контейнер с фиксированной шириной только для демонстрационных целей. В производстве это будет ширина родительского блока.
Это решение говорит браузеру визуализировать изображение с максимально доступной шириной и регулировать высоту в процентах от этой ширины.
Ответ 3
Я очень сильно боролся с этой проблемой и в конце концов пришел к такому простому решению:
Вы можете настроить ширину и высоту в соответствии с вашими потребностями, а свойство object-fit сделает обрезку для вас.
Ответ 4
Свойство background-size имеет значение только >= 9, но если это нормально, вы можете использовать div с background-image и установить background-size: contain :
Теперь вы можете просто установить размер вашего div так, как вам хочется, и не только изображение будет сохранять его соотношение сторон, оно также будет централизовано как вертикально, так и горизонтально внутри div. Просто не забудьте установить размеры в css, так как divs не имеют атрибута width/height самого тега.
Этот подход отличается от ответа setecs, используя это, область изображения будет постоянной и определенной вами (оставляя пустое пространство горизонтально или вертикально в зависимости от размера div и пропорции изображения), в то время как ответ setecs предоставит вам поле что точно размер масштабируемого изображения (без пустых пространств).
Изменить: В соответствии с документами размера фона MDN вы можете имитировать свойство background-size в IE8 с использованием проприетарного объявления фильтра:
Хотя Internet Explorer 8 не поддерживает свойство background-size, можно использовать некоторые из его функций, используя функцию нестандартного -ms-фильтра:
Ответ 5
Очень похоже на некоторые ответы здесь, но в моем случае у меня были изображения, которые иногда были более высокими, иногда большими.
Этот стиль работал как шарм, чтобы убедиться, что все изображения используют все свободное пространство, сохраняют соотношение и не разрезают:
Ответ 6
Удалите свойство height.
Указывая оба параметра, вы изменяете соотношение сторон изображения. Просто установите один, измените размер, но сохраните пропорции.
Необязательно, чтобы ограничить превышения:
Ответ 7
Просто добавьте это в свой css, он будет автоматически сжиматься и расширяться с сохранением исходного соотношения.
Ответ 8
Не существует стандартного способа сохранить соотношение сторон для изображений, для которых width , height и max-width указаны вместе.
Поэтому мы вынуждены либо указать width и height , чтобы предотвратить "скачки" страниц при загрузке изображений, либо использовать max-width и не указывать размеры для изображений.
Указывать только width (без height ) обычно не имеет особого смысла, но вы можете попытаться переопределить HTML-атрибут height , добавив правило, подобное IMG , в свою таблицу стилей.
См. также связанную ошибку Firefox 392261.
Ответ 9
Установите для класса CSS тега контейнера вашего изображения значение image-class :
и добавьте это в свою таблицу стилей CSS.
Ответ 10
Чтобы сохранить отзывчивое изображение, сохраняя при этом определенное соотношение сторон, вы можете сделать следующее:
Это можно использовать для обеспечения определенного соотношения сторон независимо от размера изображения, загружаемого авторами.
Ответ 11
Чтобы заставить изображение соответствовать точному размеру, вам не нужно писать слишком много кодов. Это так просто
Ответ 12
Вот ответ, если вы хотите поместить изображение с фиксированным процентом ширины, но не с фиксированным пикселем ширины.
И это будет полезно при работе с экраном другого размера.
- С помощью padding-top установите высоту по ширине.
- Используя position: absolute , чтобы поместить изображение в отступы.
- Используя max-height and max-width , убедитесь, что изображение не будет поверх родительского элемента.
- используя display:block and margin: auto для центрирования изображения.
Я также прокомментировал большинство хитростей внутри скрипки.
Я также нахожу некоторые другие способы сделать это. В html не будет реального изображения, поэтому я лично предпочитаю верхний ответ, когда мне нужен элемент img в html.
Ответ 13
Вы можете создать div следующим образом:
И используйте этот css для его стиля:
Ответ 14
Вы можете использовать это:
Ответ 15
Это уменьшит изображение, если оно слишком велико для указанной области (как недостаток, он не будет увеличивать изображение).
Решение setec отлично подходит для "Shrink to Fit" в автоматическом режиме. Но, чтобы оптимально РАСШИРЯТЬ, чтобы вписаться в "автоматический" режим, вам нужно сначала перенести полученное изображение в временный идентификатор, Проверьте, может ли он расширяться по высоте или по ширине (в зависимости от его формата пропорции v/s соотношение сторон вашего блока отображения),
Этот подход полезен, когда принятые изображения меньше, чем окно отображения. Вы должны сохранить их на своем сервере в оригинальном малом размере, а не в расширенной версии, чтобы заполнить свой экран большего размера, чтобы сохранить размер и пропускную способность.
Ответ 16
Ответ 17
Как насчет использования псевдоэлемента для вертикального выравнивания? Это меньше кода для карусели, но я думаю, что он работает на каждом контейнере с фиксированным размером. Он сохранит пропорции и вставляет @серо-темные полосы сверху/снизу или слева/запись для кратчайшего измерения. Между тем изображение центрируется по горизонтали с помощью выравнивания текста и вертикали псевдоэлементом.
Ответ 18
Имейте в виду, что если высота порта обзора больше, чем изображение, изображение будет естественно ухудшаться по сравнению с разницей.
Я хочу создать div, который может изменять свою ширину / высоту по мере изменения ширины окна.
есть ли какие-либо правила CSS3, которые позволили бы изменить высоту в соответствии с шириной,при сохранении соотношения сторон?
Я знаю, что могу сделать это через JavaScript, но я бы предпочел использовать только CSS.
просто создайте обертку <div> С процентным значением для padding-bottom , например:
это приведет к <div> С высотой равной 75% из ширины своего контейнера (коэффициента сжатия 4:3).
это зависит от того, что для заполнения:
Padding-нижние значения для других соотношений сторон и 100% ширины:
размещение контента в div :
чтобы сохранить соотношение сторон div и предотвратить его растягивание, вам нужно добавить абсолютно позиционированный ребенок и растянуть его до краев обертки с помощью:
можно использовать vw для ширина и высота элемента. Это позволяет сохранить соотношение сторон элемента на основе ширины окна просмотра.
кроме того, вы также можете использовать vh для высоты видового экрана или даже vmin / vmax для использования меньшего / большего окна просмотра размеры (обсуждение здесь).
пример: соотношение сторон 1:1
для других соотношений сторон можно использовать следующую таблицу для вычисления значения высоты в соответствии с шириной элемента:
пример: 4x4 сетка квадратных divs
поддержка браузера для блоков vh / vw IE9 + см. canIuse для получения дополнительной информации
Я нашел способ сделать это с помощью CSS, но вы должны быть осторожны, так как это может измениться в зависимости от потока вашего собственного веб-сайта. Я сделал это, чтобы встроить видео с постоянным соотношением сторон в жидкую часть ширины моего веб-сайта.
скажем, у вас есть встроенное видео, как это:
затем вы можете разместить все это внутри div с классом "видео". Этот класс видео, вероятно, будет элементом fluid на вашем веб-сайте таким, что сам по себе он имеет нет прямых ограничений по высоте, но при изменении размера браузера он будет меняться по ширине в соответствии с потоком веб-сайта. Это будет элемент, который вы, вероятно, пытаетесь получить встроенное видео, сохраняя при этом определенное соотношение сторон видео.
для этого я помещаю изображение перед встроенным объектом в класс" видео " div.
. Важная часть заключается в том, что изображение имеет правильное соотношение сторон, которое вы хотите сохранить. Также убедиться размер изображения по крайней мере такой же большой, как самый маленький, который вы ожидаете, что видео (или то, что вы поддерживаете A. R.) будет основано на вашем макете. Это позволит избежать возможных проблем в разрешении изображения при его изменении в процентах. Например, если вы хотите сохранить соотношение сторон 3: 2, не просто используйте изображение 3px на 2px. При некоторых обстоятельствах это может сработать, но я не проверял его, и, вероятно, было бы хорошей идеей избежать этого.
вы должны вероятно, уже есть минимальная ширина, как это определено для жидких элементов вашего веб-сайта. Если нет, это хорошая идея сделать это, чтобы избежать отсечения элементов или перекрытия, когда окно браузера становится слишком маленьким. Лучше иметь полосу прокрутки в какой-то момент. Самая маленькая по ширине веб-страница должна получить где-то около
600px (включая любые столбцы фиксированной ширины), потому что разрешения экрана не уменьшаются, если вы не имеете дело с удобными для телефона сайтами. .
Я использую полностью прозрачный png, но я не думаю, что это имеет значение, если вы сделаете это правильно. Вот так:
Теперь вы должны иметь возможность добавить CSS, подобный следующему:
убедитесь, что вы также удаляете любое явное объявление высоты или ширины в объекте и вставляете теги, которые обычно поставляются с копией/вставленным кодом вставки.
способ его работы зависит от свойств позиции элемента класса видео и элемент, который вы хотите поддерживать определенное соотношение сторон. Он использует то, как изображение будет поддерживать правильное соотношение сторон при изменении размера элемента. Он говорит, что все остальное находится в элементе класса видео, чтобы в полной мере воспользоваться недвижимостью, предоставляемой динамическим изображением, заставляя его ширину / высоту до 100% элемента класса видео, настраиваемого изображением.
возможно, вам придется немного поиграть с ним, чтобы заставить его работать с вашим собственный дизайн, но это на самом деле работает на удивление хорошо для меня. Есть общая концепция.
Если вы хотите, чтобы ваш div был шириной, отличной от 100%, вам нужен другой обертывающий div, на котором можно установить ширину:
Эллиот вдохновил меня на это решение-спасибо:
aspectratio.jpg - это полностью прозрачный PNG-файл с размером вашего предпочтительного соотношения сторон, в моем случае 30x10 пикселей.
HTML-код
С помощью CSS3
задает отступ в процентах от ширины содержит элемент
Ergo, правильный пример отзывчивого DIV, который сохраняет соотношение сторон 16: 9, выглядит так следует:
основываясь на ваших решениях, которые я сделал какой-то трюк:
когда вы используете его, ваш HTML будет только
использовать его таким способом: CSS:
и имея это, вы просто установите attr data-keep-ratio к высоте / ширине и это все.
вы можете использовать svg. Сделайте положение контейнера / обертки относительным, поместите svg сначала как статически расположенное, а затем поместите абсолютно расположенное содержимое (вверху: 0; слева:0; справа:0; внизу:0;)
пример с пропорциями 16: 9:
изображения.svg: (может быть встроен в src)
обратите внимание, что встроенный svg, похоже, не работает, но вы можете urlencode svg и встроить его в атрибут img src вот так:
As @web-tiki уже показывает способ использования vh / vw , мне также нужен способ центрирования на экране, вот фрагмент кода для 9:16 портрет.
translateY будет держать этот центр на экране. calc(100vw * 16 / 9) ожидается рост на 9/16. (100vw * 16 / 9 - 100vh) это высота переполнения, так что, потяните вверх overflow height/2 будет держать его в центре экрана.
для ландшафта, и сохранить 16:9, вы показываете use
коэффициент 9/16 легкость чтобы изменить, не нужно предопределенных 100:56.25 или 100:75 .Если вы хотите сначала обеспечить высоту, вы должны переключить ширину и высоту, например height:100vh;width: calc(100vh * 9 / 16) для портрета 9:16.
если вы хотите адаптироваться для разных размеров экрана, вы также можете заинтересовать
От автора: важно иметь постоянное соотношение ширины и высоты изображений и других адаптивных элементов. В CSS мы много лет использовали метод заполнения отступов, но теперь у нас есть встроенная поддержка соотношения сторон в CSS. В этой статье я расскажу, что такое соотношение сторон, как мы это делали и как это сделать по-новому. Конечно, будут примеры с соответствующими вариантами решений.
Введение: Что такое соотношение сторон?
Согласно Википедии: В математике соотношение указывает, сколько раз одно число содержит другое. Например, если в миске с фруктами находится восемь апельсинов и шесть лимонов, то соотношение апельсинов и лимонов будет восемь к шести (то есть 8∶6, что эквивалентно соотношению 4∶3).
В веб-дизайне понятие соотношения сторон используется для описания того, что ширина и высота изображения должны изменяться пропорционально друг другу. Рассмотрим следующий рисунок.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Размер поля изменяется пропорционально, и соотношение между его шириной и высотой остается неизменным. Теперь представим, что коробка содержит важное изображение, и мы заботимся обо всех его деталях.
Обратите внимание, что детали изображения сохраняются независимо от размера. Имея постоянное соотношение сторон, мы можем получить следующие преимущества:
Изображения на веб-сайте будут одинаковыми для разных размеров области просмотра.
Важные детали сохранены.
У нас тоже могут быть отзывчивые видеоэлементы.
Это помогает дизайнерам создавать четкое руководство по размеру изображений, чтобы разработчики могли обрабатывать их в процессе разработки.
Измерение соотношения сторон
Чтобы измерить соотношение сторон, нам нужно разделить ширину на высоту, как показано на следующем рисунке.
Соотношение ширины и высоты 1,33. Значит, это соотношение следует соблюдать. Взгяните на следующий рисунок:
Обратите внимание на изображение справа, значение ширины ÷ высоты составляет 1,02 , что не соответствует исходному соотношению сторон (1,33 или 4: 3).
Вы можете спросить, как придерживатся значения 4: 3 ? Это называется ближайшим нормальным соотношением сторон, и есть инструменты, которые могут помочь нам в его поиске. При работе над дизайном пользовательского интерфейса настоятельно рекомендуется точно знать, какое соотношение сторон изображений вы используете. Использование специального калькулятора может помочь в этом.
Я надеюсь, что концепция соотношения сторон теперь вам понятна. Если вы уже знали об этом, то я надеюсь, что вы просто обновили свои знания.
Реализация соотношения сторон в CSS
Мы привыкли реализовывать соотношение сторон, используя процентное заполнение в CSS. Хорошей новостью является то, что недавно мы получили встроенную поддержку aspect-ratio во всех основных браузерах. Прежде чем погрузиться в новый способ, я сначала объясню старый, добрый и проверенный способ.
Когда элемент имеет вертикальное процентное заполнение, оно будет основано на ширине его родительского элемента. Рассмотрим следующий рисунок:
Когда заголовок имеет padding-top:50%, значение вычисляется на основе его родительской ширины. Так как ширина родителя 200px, то padding-top будет 100px.
Результат 195/260 составляет 0,75 (или 75%).
Предположим, что есть сетка карточек, и у каждой из них есть миниатюра. Миниатюры должны быть равными по ширине и высоте.
По какой-то причине автор контента загрузил изображение, размер которого не соответствует другим. Обратите внимание на то, что высота средней карты не такая же, как у других.
Вы можете подумать, ну, мы можем добавить фиксированную высоту и object-fit: cover. Проблема решена, правда? Это не так просто. Это решение не будет хорошо смотреться при изменении размеров области просмотра.
Обратите внимание, что в средней миниатюре с фиксированной высотой, слишком обрезаны края слева и справа, в то время как на мобильных устройствах они слишком широкие. Все это за счет использования фиксированной высоты. Мы можем настроить высоту вручную с помощью различных медиа-запросов, но это не практическое решение.
Нам нужен постоянный размер миниатюр вне зависимости от размера области просмотра. Для этого нам нужно реализовать соотношение сторон, используя процентное заполнение.
Я хочу создать div , который может изменять свою ширину / высоту при изменении ширины окна.
Существуют ли какие-либо правила CSS3, позволяющие изменять высоту в соответствии с шириной, при сохранении соотношения сторон ?
Я знаю, что могу сделать это с помощью JavaScript, но я бы предпочел использовать только CSS.
Просто создайте оболочку <div> с процентным значением для padding-bottom , например:
В результате получится <div> с высотой, равной 75% ширины его контейнера (соотношение сторон 4: 3).
Это зависит от того, что для заполнения:
Значения Padding-bottom для других соотношений сторон и 100% ширины:
Размещение содержимого в div:
Чтобы сохранить соотношение сторон div и предотвратить его растяжение содержимого, вам нужно добавить абсолютно позиционированный дочерний элемент и растянуть его до краев оболочки с помощью:
Вы можете использовать единицы vw как для ширины, так и для высоты элемента. Это позволяет сохранить соотношение сторон элемента в зависимости от ширины области просмотра.
В качестве альтернативы вы также можете использовать vh для высоты области просмотра или даже vmin / vmax , чтобы использовать меньшее / большее из размеров области просмотра (обсуждение здесь).
Пример: соотношение сторон 1: 1.
Для других соотношений сторон вы можете использовать следующую таблицу, чтобы вычислить значение высоты в соответствии с шириной элемента:
Пример: квадратная сетка 4x4.
Браузер поддерживает устройства vh / vw IE9 + см. canIuse для получения дополнительной информации
Элемент display:grid позволяет вам занимать одно и то же пространство с двумя (или более) его дочерними элементами, используя один и тот же grid-area .
Это означает, что все они являются потоковым содержимым, накладываются друг на друга и по умолчанию более высокий устанавливает соотношение .
Одним из них будет <svg> , отвечающий за настройку соотношения. Другой, актуальный контент. Если фактический контент короткий и никогда не заполняет все соотношение (и вы просто хотите, чтобы он был центрирован в пространстве с этим соотношением), просто отцентрируйте его (см. Первый запускаемый фрагмент ниже).
Установите любое соотношение <svg> :
- <svg viewBox="0 0 4 3"></svg>
- <svg viewBox="0 0 16 9"></svg>
Если вам нужно решение, в котором элемент содержимого содержит больше содержимого, которое вы хотите ограничить прокручиваемой областью с желаемым соотношением, установите position:relative для родительского элемента и position:absolute; height:100%; overflow-y: auto; для содержимого, разрешив элемент потока содержимого ( <svg> ), чтобы установить размер, следовательно, и соотношение.
Как отметил @emjay в комментарии ниже, ratio svg может быть помещено в один из родительских псевдоэлементов, если оно правильно закодировано:
При использовании внутри псевдоэлемента <svg> становится заменяемым элементом , который по умолчанию располагается на базовой линии переменной высоты ( 4px в Chrome, 3.5px в Firefox). Высота базовой линии варьируется в зависимости от line-height , поэтому нам нужно установить line-height: 0 на псевдо, чтобы получить точное соотношение. Подробнее см. здесь.
Лично я предпочитаю версию, в которой <svg> помещается в разметку, поскольку у меня может быть один класс ( .ratio ), имеющий дело с контейнерами с различными соотношениями (в отличие от класса для каждого отдельного соотношения, которое я мог бы нужно).
Я нашел способ сделать это с помощью CSS, но вы должны быть осторожны, так как это может измениться в зависимости от потока вашего собственного веб-сайта. Я сделал это для того, чтобы встраивать видео с постоянным соотношением сторон в часть моего веб-сайта с плавной шириной.
Допустим, у вас есть встроенное видео вроде этого:
Затем вы можете поместить все это в div с классом «видео». Этот видео-класс, вероятно, будет плавным элементом на вашем веб-сайте, так что сам по себе он не имеет прямых ограничений по высоте, но когда вы изменяете размер браузера, он будет изменять ширину в соответствии с потоком веб-сайта. Это будет тот элемент, в который вы, вероятно, пытаетесь вставить встроенное видео, сохраняя при этом определенное соотношение сторон видео.
Для этого я помещаю изображение перед встроенным объектом в div класса «видео».
. Важная часть заключается в том, чтобы изображение имело правильное соотношение сторон, которое вы хотите сохранить. Кроме того, убедитесь, что размер изображения по крайней мере такой же, как наименьший, который вы ожидаете, что видео (или то, что вы поддерживаете A.R.) будет основано на вашем макете. Это позволит избежать любых потенциальных проблем с разрешением изображения при изменении его размера в процентах. Например, если вы хотите сохранить соотношение сторон 3: 2, не используйте изображение размером 3 на 2 пикселя. Это может сработать при некоторых обстоятельствах, но я не тестировал его, и, вероятно, было бы неплохо этого избежать.
Вероятно, у вас уже должна быть минимальная ширина, подобная этой, определенная для подвижных элементов вашего веб-сайта. В противном случае рекомендуется сделать это, чтобы избежать отсечения элементов или перекрытия элементов, когда окно браузера становится слишком маленьким. Лучше в какой-то момент иметь полосу прокрутки. Наименьшая ширина веб-страницы должна быть где-то около 600 пикселей (включая любые столбцы с фиксированной шириной), потому что разрешения экрана не становятся меньше, если вы не имеете дело с сайтами, удобными для телефонов. .
Я использую полностью прозрачный png, но я не думаю, что это имеет значение, если вы все сделаете правильно. Нравится:
Теперь у вас должна быть возможность добавить CSS, подобный следующему:
Убедитесь, что вы также удалили любое явное объявление высоты или ширины в объекте и теги внедрения, которые обычно идут с копируемым / вставленным кодом встраивания.
То, как это работает, зависит от свойств позиции элемента класса видео и элемента, который вы хотите, чтобы поддерживать определенное соотношение сторон. Он использует способ сохранения правильного соотношения сторон изображения при изменении размера элемента. Он сообщает, что еще есть в элементе класса видео, чтобы в полной мере использовать возможности, предоставляемые динамическим изображением, путем принудительного увеличения его ширины / высоты до 100% элемента класса видео, регулируемого изображением.
Довольно круто, а?
Возможно, вам придется немного поэкспериментировать с ним, чтобы заставить его работать с вашим собственным дизайном, но на самом деле это работает для меня на удивление хорошо. Общая концепция есть.
Эллиот вдохновил меня на это решение - спасибо:
aspectratio.jpg - это полностью прозрачный PNG-файл с размером вашего предпочтительного соотношения сторон, в моем случае 30x10 пикселей.
Задает отступ в процентах от ширины содержащего элемента
Итак, правильный пример адаптивного DIV с соотношением сторон 16: 9 выглядит следующим образом:
Если вы хотите, чтобы ваш div имел ширину, отличную от 100%, вам понадобится еще один оборачивающий div, на котором можно установить ширину:
Это улучшение принятого ответа:
- Использует псевдоэлементы вместо div-оболочки
- Соотношение сторон основано на ширине блока, а не на его родительском элементе.
- Коробка растянется по вертикали, когда содержимое станет выше.
Вы можете использовать svg. Сделайте положение контейнера / оболочки относительным, сначала поместите svg как статически позиционированный, а затем поместите абсолютно позиционированный контент (вверху: 0; слева: 0; справа: 0; внизу: 0;)
Пример с пропорциями 16: 9:
Image.svg: (может быть встроен в src)
Обратите внимание, что встроенный svg, похоже, не работает, но вы можете urlencode svg и встроить его в атрибут img src следующим образом:
Основываясь на ваших решениях, я сделал хитрость:
Когда вы его используете, ваш HTML будет только
Чтобы использовать это таким образом, сделайте: CSS:
Имея это, вы просто устанавливаете attr data-keep-ratio на высоту / ширину и все.
Обратите внимание, что я использовал большие значения в атрибутах ширины и высоты SVG, так как он должен быть больше, чем максимальный ожидаемый размер, так как он может только сжиматься. В этом примере соотношение div составляет 10: 5.
Если вы хотите разместить квадрат внутри области просмотра в портретной или альбомной ориентации (как можно больше, но ничего не торчит снаружи), переключитесь между использованием vw / vh для ориентации portrait / landscape :
Вы можете добиться этого, используя SVG.
Это зависит от случая, но в некоторых случаях это действительно полезно. Например, вы можете установить background-image , не устанавливая фиксированную высоту, или использовать его для встраивания YouTube <iframe> с соотношением 16:9 и position:absolute и т. Д.
Для 3:2 соотношение установите viewBox="0 0 3 2" и так далее.
Хочу поделиться своим решением, где у меня есть тег img , заполняющий определенное соотношение сторон. Я не мог использовать background из-за отсутствия поддержки CMS, и я бы не предпочел использовать такой тег стиля: <img style="background:url(. )" /> . Кроме того, ширина составляет 100%, поэтому нет необходимости устанавливать фиксированный размер, как в некоторых решениях. Он будет масштабироваться быстро!
Решение 2020 - использование сетки и отступов псевдоэлемента
Я нашел более свежий способ решить этот случай. Это решение является потомком любого метода padding-bottom , но без каких-либо дочерних position: absolute , только с использованием display: grid; и псевдоэлемента.
Здесь у нас есть .ratio::before со старым добрым padding-bottom: XX% и grid-area: 1 / 1 / 1 / 1; , что заставляет псевдоэлемент сохранять позицию в сетке. Хотя здесь у нас есть width: 0; , чтобы предотвратить переполнение основного элемента этим (здесь мы используем z-index , но этот короче).
И наш основной элемент .ratio > *:first-child имеет то же положение, что и .ratio::before , то есть grid-area: 1 / 1 / 1 / 1; , поэтому они оба занимают одно и то же место в ячейке сетки. Теперь мы можем поместить любой контент в наш div, и псевдоэлемент определяет соотношение ширины / высоты. Подробнее о grid-area.
Хотя вы можете использовать CSS val и поместить свое соотношение в HTML с помощью атрибута style . Также работает с display: inline-grid .
Читайте также: