В Tailwind съотношението на страните е пропорцията на ширината на елемента към височината, като видео или изображение. Tailwind CSS въведе естествена поддръжка за помощни програми за аспектно съотношение, които използват свойството CSS аспектно съотношение, за да зададат желаното аспектно съотношение за елемент. Това свойство обаче не се поддържа в по-стари браузъри. Следователно потребителите могат да използват приставката за съотношение на страните, за да поддържат тези браузъри. Този плъгин въвежда два класа, т.е. аспект-w-{n} ' и ' аспект-h-{n} ”, които могат да се комбинират, за да дадат на даден елемент фиксирано съотношение.
Тази статия ще обясни метода за задаване на приставката за пропорции в Tailwind.
Как да настроите приставката за съотношение на страните в Tailwind CSS?
За да настроите приставката за съотношение на страните в Tailwind, вижте посочените по-долу стъпки:
- Инсталирайте приставката за пропорции в проекта
- Добавете приставката за съотношение във файла „tailwind.config.js“ и деактивирайте „ аспект ” основен плъгин
- Използвайте класовете на приставката за пропорции в HTML програмата
- Проверете изхода, като прегледате HTML уеб страницата
Стъпка 1: Инсталирайте приставката за съотношение на страните в проекта Tailwind
Първо отворете терминала и изпълнете посочената по-долу команда, за да инсталирате плъгина за пропорции в проекта:
надморска височина и @ попътен вятър / съотношение
Стъпка 2: Конфигурирайте приставката за пропорции в конфигурационния файл на Tailwind
След това отворете файла „tailwind.config.js“, добавете приставката за пропорции в него и деактивирайте „ аспект ” основен плъгин за избягване на конфликти:
module.exports = {съдържание: [ './index.html' ] ,
corePlugins: {
съотношение: невярно ,
} ,
добавки: [
изискват ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;
Стъпка 3: Използвайте приставката за съотношение на страните в HTML програма
Сега направете HTML програма и използвайте приставката за пропорции в нея. Например използвахме “ аспект-w-16 ' и ' аспект-h-9 ” в нашата програма за поддържане на съотношението 16:9:
< тяло >< див клас = 'aspect-w-16 aspect-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
граница на рамката = '0' позволява = 'акселерометър; автоматично пускане;
клипборд-запис; криптирана медия; жироскоп;
картина в картина' позволи цял екран > iframe >
див >
тяло >
Тук:
- „ ” елементът използва два класа плъгини за пропорции, т.е. аспект-w-16 ' и ' аспект-h-9 ”. Тези класове се използват за създаване на контейнер с фиксирано съотношение на страните 16:9.
- „