Ayudas de TailwindCSS para `<img>`

TailwindCSS proporciona varias clases auxiliares para trabajar con la etiqueta <img>. Aquí están algunas de las más comúnmente utilizadas:

  • object-contain: Esta clase ajusta la imagen dentro de su contenedor manteniendo su relación de aspecto. Redimensionará o ampliará la imagen según sea necesario para asegurarse de que encaje dentro del contenedor.
  • object-cover: Esta clase ajusta la imagen para cubrir todo el contenedor manteniendo su relación de aspecto. Recortará o redimensionará la imagen según sea necesario para cubrir el contenedor.
  • object-fill: Esta clase ajusta la imagen para llenar todo el contenedor, sin mantener su relación de aspecto. Esto puede hacer que la imagen se estire o se comprima para ajustarse dentro del contenedor.
  • object-none: Esta clase ajusta la imagen a su tamaño natural, sin ningún tipo de cambio de tamaño o recorte.
  • object-center: Esta clase centra la imagen horizontalmente 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 utilizar en combinación con otras clases TailwindCSS para dar estilo a sus imágenes, como estableciendo un ancho o alto específico, agregando bordes o sombras, o ajustando la opacidad.