Ayudantes de TailwindCSS para `<img>`
TailwindCSS proporciona varias clases de ayuda para trabajar con la etiqueta <img>
. Aquí están algunas de las más comúnmente usadas:
object-contain
: Esta clase ajusta la imagen para que encaje dentro de su contenedor manteniendo su proporción. Se encogerá o ampliará según sea necesario para asegurarse de que cabe dentro del contenedor.object-cover
: Esta clase ajusta la imagen para que cubra todo el contenedor manteniendo su proporción. Recortará la imagen o la reducirá según sea necesario para asegurar que cubra el contenedor.object-fill
: Esta clase ajusta la imagen para que llene todo el contenedor, sin mantener su proporción. Esto puede hacer que la imagen se estire o se comprima para encajar dentro del contenedor.object-none
: Esta clase ajusta la imagen a su tamaño natural, sin redimensionar o recortar.object-center
: Esta clase centra la imagen horizontal y verticalmente dentro de su contenedor.object-left
: Esta clase alinea la imagen a la izquierda dentro de su contenedor.object-right
: Esta clase alinea la imagen a la derecha dentro de su contenedor.object-top
: Esta clase alinea la imagen en la parte superior de su contenedor.object-bottom
: Esta clase alinea la imagen en la parte inferior de su contenedor.
Estas clases se pueden usar en conjunto con otras clases de TailwindCSS para darle un estilo adicional a tus imágenes, como establecer un ancho o alto específico, añadir bordes o sombras, o ajustar la opacidad.