LEARN

Tailwind CSS Images

Responsive images built with Tailwind CSS. Use classes for images to make your pictures responsive and more beautiful.

Responsive images

Use .max-w-full and .h-auto classes to make a image responsive.

Image 
<div class="w-full relative h-auto">
        <img src="https://pagedone.io/asset/uploads/1707713972.png" alt="Image" class="w-full max-w-full h-auto">
        </div>

Thumbnails

Use .border class to give an image a rounded 1px border appearance.

Image 
<div class="w-full relative h-auto p-1 border border-gray-200 rounded-md max-w-sm mx-auto">
        <img src="https://pagedone.io/asset/uploads/1707713972.png" alt="Image" class="rounded-md max-w-full h-auto">
        </div>

Image with Shadow

Use shadow classes to add a shadow to the image.

Image 
<div class="w-full relative h-auto rounded-md max-w-sm mx-auto">
        <img src="https://pagedone.io/asset/uploads/1707713972.png" alt="Image" class="rounded-md max-w-full h-auto shadow-lg shadow-gray-300">
        </div>

Shadow on hover

Use .transition-shadow class to the element to apply a shadow hover effect.

Image 
<div class="w-full relative h-80 flex items-center justify-center p-2">
        <img src="https://pagedone.io/asset/uploads/1707713972.png" alt="Image" class="rounded-md max-w-sm mx-auto h-auto shadow-none transition-shadow duration-300 cursor-pointer hover:shadow-lg hover:shadow-gray-400">
        </div>

Shapes

Change the shape of the image.

Image
Image 
<div class="w-full relative">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="flex items-center justify-center w-full">
        <img src="https://pagedone.io/asset/uploads/1707713972.png" alt="Image" class=" h-auto rounded-lg">
        </div>
        <div class="flex items-center justify-center w-full">
        <img src="https://pagedone.io/asset/uploads/1707713972.png" alt="Image" class="aspect-square h-auto rounded-[50%]">
        </div>
        <div class="flex items-center justify-center w-full">
        <img src="https://pagedone.io/asset/uploads/1707713972.png" alt="Image" class=" h-auto rounded-full">
        </div>
        </div>
        </div>

Tailwind CSS Object Fit

To fix images in our carousel we need to use CSS property called object-fit. Tailwind has utility classes for this property, so let's have a look at how exactly it works.

How it works:

The object-fit property in Tailwind CSS is used to specify how an image or video should be resized to fit its container. It accepts the following values:

  • contain : Resize the content to stay contained within its container.
  • cover : Resize the content to cover its container.
  • fill : Stretch the content to fit its container.
  • none : Display the content at its original size ignoring the container size.
  • scale-down : Display the content at its original size but scale it down to fit its container if necessary.

Image

object-contain

Image

object-cover

Image

object-fill

Image

object-none

Image

object-scale-down

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="w-full h-auto flex items-center flex-col gap-3">
        <div class="flex items-center justify-center w-full aspect-square border border-gray-200 rounded-lg">
        <img src="https://pagedone.io/asset/uploads/1709188793.jpg" alt="Image" class=" object-contain  h-48 w-full">
        </div>
        <p class="text-center text-lg font-semibold text-gray-900">object-contain</p>
        </div>
        <div class="w-full h-auto flex items-center flex-col gap-3">
        <div class="flex items-center justify-center w-full aspect-square border border-gray-200 rounded-lg">
        <img src="https://pagedone.io/asset/uploads/1709188793.jpg" alt="Image" class=" object-cover h-48 w-full">
        </div>
        <p class="text-center text-lg font-semibold text-gray-900">object-cover</p>
        </div>
        <div class="w-full h-auto flex items-center flex-col gap-3">
        <div class="flex items-center justify-center w-full aspect-square border border-gray-200 rounded-lg">
        <img src="https://pagedone.io/asset/uploads/1709188793.jpg" alt="Image" class=" object-fill h-48 w-full">
        </div>
        <p class="text-center text-lg font-semibold text-gray-900">object-fill</p>
        </div>
        <div class="w-full h-auto flex items-center flex-col gap-3">
        <div class="flex items-center justify-center w-full aspect-square border border-gray-200 rounded-lg">
        <img src="https://pagedone.io/asset/uploads/1709188793.jpg" alt="Image" class=" object-none h-48 w-full">
        </div>
        <p class="text-center text-lg font-semibold text-gray-900">object-none</p>
        </div>
        <div class="w-full h-auto flex items-center flex-col gap-3">
        <div class="flex items-center justify-center w-full aspect-square border border-gray-200 rounded-lg">
        <img src="https://pagedone.io/asset/uploads/1709188793.jpg" alt="Image" class="object-scale-down h-48 w-full">
        </div>
        <p class="text-center text-lg font-semibold text-gray-900">object-scale-down</p>
        </div>
        </div>