Это сообщение изначально было опубликовано в теме 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.