TailwindCSS helpers for `<img>`

TailwindCSS provides several helper classes for working with the <img> tag. Here are some of the most commonly used ones:

  • object-contain: This class sets the image to fit within its container while maintaining its aspect ratio. It will either shrink or expand the image as needed to ensure it fits within the container.
  • object-cover: This class sets the image to cover the entire container while maintaining its aspect ratio. It will either crop the image or shrink it as needed to ensure it covers the container.
  • object-fill: This class sets the image to fill the entire container, without maintaining its aspect ratio. This can cause the image to be stretched or compressed to fit within the container.
  • object-none: This class sets the image to its natural size, without any resizing or cropping.
  • object-center: This class centers the image horizontally and vertically within its container.
  • object-left: This class aligns the image to the left within its container.
  • object-right: This class aligns the image to the right within its container.
  • object-top: This class aligns the image to the top of its container.
  • object-bottom: This class aligns the image to the bottom of its container.

These classes can be used in conjunction with other TailwindCSS classes to further style your images, such as setting a specific width or height, adding borders or shadows, or adjusting the opacity.