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.
<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.
<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.
<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>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Shadow on hover
Use .transition-shadow class to the element to apply a shadow hover effect.
<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.
<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.
object-contain
object-cover
object-fill
object-none
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/1720430552.png" 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/1720430552.png" 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/1720430552.png" 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/1720430552.png" 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/1720430552.png" 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>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More