В 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.
- «