Это сообщение изначально было опубликовано в теме Red Pixel Themes
Что такое соотношение сторон
Вы, наверное, часто слышали эти 2 слова при работе с изображениями или видео, но, вероятно, не знаете определения, если это так, то я исправлю это для вас прямо сейчас:
Соотношение сторон изображения — это отношение его ширины к высоте. Обычно это выражается двумя числами, разделенными двоеточием, например, 16:9.
Спасибо, Википедия!
Теперь, почему это важно?
Когда вы работаете с изображениями, у вас есть возможность изменить их ширину и высоту с помощью CSS и даже с помощью собственных атрибутов ( width="" height=""
), но для того, чтобы сделать эти изображения адаптивными для всех размеров экрана, потребуется много CSS или классы, в случае с TailwindCSS.
Вы можете решить эту проблему, используя соотношение сторон. Почему? Поскольку при использовании соотношения сторон вы, по сути, создаете одинаковые пропорции изображения независимо от размера экрана, изображение будет автоматически масштабироваться в зависимости от доступного места.
Наиболее распространенные соотношения сторон для Интернета
Хорошо, теперь вы знаете, что такое соотношение сторон, поэтому давайте поговорим о самых распространенных:
- 16:9 является наиболее распространенным форматом, также называемым широкоэкранным, и он используется компьютерными мониторами, телевизорами и т. д. Это также наиболее распространенный формат для видео в целом.
- Есть 16:10, который используется Macbook Pro.
- Старые телевизоры и видеоигры имеют соотношение сторон 4:3, поэтому, если вы играете в видеоигру на более новом экране, вы увидите черные полосы по бокам, потому что видеоигра и ваш экран имеют разные соотношения сторон.
- Сверхширокие мониторы используют соотношение сторон, такое как 21:9 и 32:9, которые являются вариациями 16:9, просто увеличивая ширину экрана.
- Для изображений обычно используются различные соотношения сторон, все зависит от того, как вы хотите, чтобы изображение выглядело, но для изображения, которое должно занимать всю ширину экрана, подойдет формат 16:9.
Как использовать плагин TailwindCSS Aspect Ratio
Давайте посмотрим, как мы можем использовать соотношение сторон в нашем коде.
К счастью для нас, команда Tailwind Labs создала плагин специально для использования пропорций. Вы можете установить:
- Выполнение этой команды на вашем терминале:
npm install @tailwindcss/aspect-ratio
- Затем добавьте его в конфигурацию попутного ветра:
plugins: [ require(‘@tailwindcss/aspect-ratio’), ],
Плагин поставляется с некоторыми значениями по умолчанию, поэтому мы можем использовать его из коробки.
Теперь предположим, что мы хотим добавить видео на наш сайт, и мы хотим, чтобы оно было 16:9, вот код для этого:
<div class="aspect-w-16 aspect-h-9"> <iframe ...> </div>
Теперь вы можете спросить, почему я поместил код соотношения сторон в родительский элемент, а не в элемент, на который хочу настроить таргетинг? Это из-за того, как работает плагин.
Видите ли, до недавнего времени у нас не было встроенного способа использования пропорций в CSS, поэтому нам пришлось использовать хак, который включал отступы в значениях % и абсолютную позицию. Я знаю довольно странный хак, но хорошо, что он работает во всех браузерах. Если вы хотите углубиться в это, вы можете увидеть вывод CSS плагина здесь.
Позвольте мне привести вам больше примеров.
Вот код для квадратного изображения:
<div class="aspect-w-1 aspect-h-1"> <img ...> </div>
А вот один для старых телевизоров:
<div class="aspect-w-4 aspect-h-3"> <img ...> </div>
Довольно просто: вы берете первую цифру и добавляете ее к aspect-w
, а вторую цифру — к aspect-h
.
Как добавить собственные соотношения сторон в конфигурацию TailwindCSS
Теперь вы знаете, как использовать плагин, но что, если мы хотим настроить его, плагин имеет только значения от 1 до 16, и если мы хотим использовать, скажем, сверхширокое соотношение сторон, нам понадобится чтобы добавить его в конфигурацию попутного ветра, это будет примерно так:
module.exports = { theme: { extend: { aspectRatio: { 21: '21', 32: '32' } } } }
Теперь вы можете сделать:
<div class="aspect-w-32 aspect-h-9"> <img ...> </div>
Вот и все для этого поста, теперь вы знаете, что такое соотношение сторон, какие из них наиболее распространены, как вы можете использовать его в своем коде с помощью плагина Aspect Ratio и как вы можете добавлять значения в плагин.
Следите за новостями, скоро появятся еще подобные статьи!
Первоначально опубликовано на https://redpixelthemes.com.