En Tailwind, la relación de aspecto es la proporción entre el ancho y el alto de un elemento, como un vídeo o una imagen. Tailwind CSS introdujo soporte nativo para utilidades de relación de aspecto, que utilizan la propiedad de relación de aspecto de CSS para establecer la relación de aspecto deseada para un elemento. Sin embargo, esta propiedad no es compatible con navegadores más antiguos. Por lo tanto, los usuarios pueden utilizar el complemento de relación de aspecto para admitir estos navegadores. Este complemento presenta dos clases, es decir, ' aspecto-w-{n} ' y ' aspecto-h-{n} ”, que se pueden combinar para darle a un elemento una relación de aspecto fija.
Este artículo explicará el método para configurar el complemento de relación de aspecto en Tailwind.
¿Cómo configurar el complemento de relación de aspecto en Tailwind CSS?
Para configurar el complemento de relación de aspecto en Tailwind, observe los pasos que se proporcionan a continuación:
- Instale el complemento de relación de aspecto en el proyecto.
- Agregue el complemento de relación de aspecto en el archivo 'tailwind.config.js' y desactive el ' aspecto ”complemento principal
- Utilice las clases de complementos de relación de aspecto en el programa HTML
- Verifique el resultado viendo la página web HTML
Paso 1: Instale el complemento Aspect Ratio en Tailwind Project
Primero, abra la terminal y ejecute el comando que se indica a continuación para instalar el complemento de relación de aspecto en el proyecto:
asl y @ viento de cola / relación de aspecto
Paso 2: Configurar el complemento de relación de aspecto en el archivo de configuración de Tailwind
Luego, abra el archivo “tailwind.config.js”, agregue el complemento de relación de aspecto y desactive el “ aspecto ”Complemento principal para evitar conflictos:
módulo.exportaciones = {contenido: [ './index.html' ] ,
Complementos principales: {
relación de aspecto: FALSO ,
} ,
complementos: [
requerir ( '@tailwindcss/relación de aspecto' ) ,
] ,
} ;
Paso 3: utilice el complemento de relación de aspecto en el programa HTML
Ahora, cree un programa HTML y utilice el complemento de relación de aspecto. Por ejemplo, hemos utilizado el ' aspecto-w-16 ' y ' aspecto-h-9 ”clases en nuestro programa para mantener la relación de aspecto 16:9:
< cuerpo >< div clase = 'aspecto-w-16 aspecto-h-9' >
< marco flotante src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
Frontera del marco = '0' permitir = 'acelerómetro; reproducción automática;
escritura en portapapeles; medios cifrados; giroscopio;
imagen en imagen' permitir pantalla completa > marco flotante >
div >
cuerpo >
Aquí:
- El ' El elemento 'utiliza dos clases de complementos de relación de aspecto, es decir,' aspecto-w-16 ' y ' aspecto-h-9 ”. Estas clases se utilizan para crear un contenedor con una relación de aspecto fija de 16:9.
- El '
El elemento 'se utiliza para insertar un vídeo de YouTube. - El ' src El atributo 'establece la URL de origen del vídeo que se va a incrustar.
- El ' Frontera del marco El valor del atributo es “0”, lo que elimina el borde alrededor del vídeo incrustado.
- El ' permitir El atributo 'especifica los permisos para el vídeo incrustado, como permitir la reproducción automática y el modo de imagen en imagen.
- El ' permitir pantalla completa ”permite ver el vídeo en modo de pantalla completa.
Nota: Asegúrate de que el enlace al vídeo esté incrustado.
Paso 4: verificar la salida
Por último, ejecute el programa HTML y vea la página web para verificar el resultado:
Según el resultado anterior, las clases de complementos de relación de aspecto garantizan que el contenedor mantenga la relación de aspecto deseada, es decir, 16:9.
Conclusión
Para configurar el complemento de relación de aspecto en Tailwind, primero instale el complemento de relación de aspecto en el proyecto. Luego, agregue el complemento de relación de aspecto en el archivo 'tailwind.config.js' y configure el ' aspecto 'Valor del complemento principal a' FALSO ”para desactivarlo. Después de eso, utilice las clases de complementos de relación de aspecto en el programa HTML. Finalmente, verifique el resultado viendo la página web HTML. Este artículo explica el método para configurar el complemento de relación de aspecto en Tailwind.
- El '