In Tailwind CSS, the Object-Fit utility classes are used to control how an image or video content is scaled and positioned within its container.
The object-fit property determines how the content fills the container while preserving its aspect ratio.
object-containThe object-contain class scales the content to fit within the container while preserving its aspect ratio. It may leave empty space within the container if the aspect ratios don't match.
Example:
object-coverThe object-cover class scales the content to completely cover the container, cropping any excess content that exceeds the container's boundaries. It maintains the content's aspect ratio.
Example:
object-fillThe object-fill class scales the content to completely fill the container, potentially distorting the aspect ratio. It ensures that the content fills the entire container without leaving any empty space.
Example:
