В Tailwind соотношение сторон — это соотношение ширины и высоты элемента, например видео или изображения. Tailwind CSS представил встроенную поддержку утилит соотношения сторон, которые используют свойство аспекта CSS для установки желаемого соотношения сторон для элемента. Однако это свойство не поддерживается в старых браузерах. Таким образом, пользователи могут использовать плагин соотношения сторон для поддержки этих браузеров. Этот плагин представляет два класса, а именно: « аспект-w-{n} ' и ' аспект-h-{n} », которые можно комбинировать, чтобы придать элементу фиксированное соотношение сторон.
В этой статье будет описан метод установки плагина соотношения сторон в Tailwind.
Как установить плагин соотношения сторон в Tailwind CSS?
Чтобы установить плагин соотношения сторон в Tailwind, выполните следующие действия:
- Установите плагин соотношения сторон в проект
- Добавьте плагин соотношения сторон в файл «tailwind.config.js» и отключите параметр « аспект основной плагин
- Используйте классы плагинов соотношения сторон в программе HTML.
- Проверьте вывод, просмотрев веб-страницу HTML.
Шаг 1. Установите плагин соотношения сторон в проекте Tailwind
Сначала откройте терминал и выполните приведенную ниже команду, чтобы установить плагин соотношения сторон в проект:
асл и @ попутный ветерcss / соотношение сторон
Шаг 2. Настройте плагин соотношения сторон в файле конфигурации Tailwind
Затем откройте файл «tailwind.config.js», добавьте в него плагин соотношения сторон и отключите « аспект » основной плагин, чтобы избежать конфликтов:
модуль.экспорт = {содержание: [ './index.html' ] ,
ядроПлагины: {
соотношение сторон: ЛОЖЬ ,
} ,
плагины: [
требовать ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;
Шаг 3. Используйте плагин соотношения сторон в программе HTML
Теперь создайте HTML-программу и используйте в ней плагин соотношения сторон. Например, мы использовали “ аспект-w-16 ' и ' аспект-h-9 » классов в нашей программе для поддержания соотношения сторон 16:9:
< тело >< div сорт '=' 'аспект-w-16 аспект-h-9' >
< iframe источник '=' 'https://www.youtube.com/embed/NX_NW6bt6_s'
рамка '=' '0' позволять '=' «акселерометр; автозапуск;
буфер обмена-писать; зашифрованные носители; гироскоп;
картинка в картинке» разрешить полноэкранный режим >/ iframe >
div >
тело >
Здесь:
- « <дел> ” использует два класса плагинов соотношения сторон, т.е. “ аспект-w-16 ' и ' аспект-h-9 ». Эти классы используются для создания контейнера с фиксированным соотношением сторон 16:9.
- « » используется для встраивания видео YouTube.
- « источник Атрибут » устанавливает исходный URL-адрес встраиваемого видео.
- « рамка Значение атрибута «0» означает удаление рамки вокруг встроенного видео.
- « позволять Атрибут » определяет разрешения для встроенного видео, например разрешение автозапуска и режима «картинка в картинке».
- « разрешить полноэкранный режим » позволяет просматривать видео в полноэкранном режиме.
Примечание: Убедитесь, что ссылка на видео встроена.
Шаг 4. Проверьте вывод
Наконец, запустите программу HTML и просмотрите веб-страницу, чтобы проверить вывод:
Согласно приведенному выше выводу, классы плагинов соотношения сторон гарантируют, что контейнер поддерживает желаемое соотношение сторон, то есть 16:9.
Заключение
Чтобы установить плагин соотношения сторон в Tailwind, сначала установите плагин соотношения сторон в проект. Затем добавьте плагин соотношения сторон в файл «tailwind.config.js» и установите « аспект ” значение основного плагина для “ ЛОЖЬ », чтобы отключить его. После этого используйте классы плагинов соотношения сторон в программе HTML. Наконец, проверьте вывод, просмотрев веб-страницу HTML. В этой статье объясняется метод установки плагина соотношения сторон в Tailwind.