Content
Documentation and examples for opting images into all kinds of behaviors.
In Tailwind, images and other replaced elements (like svg
, video
, canvas
, and others) are display: block
by default.
<img src="..." alt="...">
This helps to avoid unexpected alignment issues that you often run into using the browser default of display: inline
.
If you ever need to make one of these elements inline
instead of block
, simply use the inline
utility:
<img class="max-w-none" src="..." alt="...">
Use Width and Height utility classes to give an image fixed size.
<img class="w-56 h-auto" src="..." alt="...">
Use bg-fixed
to fix the background image relative to the viewport.
<div class="bg-fixed ..." style="background-image: url(...)"></div>
Use bg-local
to scroll the background image with the container and the viewport.
<div class="bg-local ..." style="background-image: url(...)"></div>
Use bg-scroll
to scroll the background image with the viewport, but not with the container.
<div class="bg-scroll ..." style="background-image: url(...)"></div>
Use bg-{side}
utilities to control the position of an element’s background image.
bg-left-top
bg-top
bg-right-top
bg-left
bg-center
bg-right
bg-left-bottom
bg-bottom
bg-right-bottom
<div class="bg-no-repeat bg-left-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-center ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left-bottom ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-bottom ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-bottom ..." style="background-image: url(...);"></div>
Use bg-auto
to display the background image at its default size.
<div class="bg-auto bg-no-repeat bg-center ..." style="background-image: url(...)"></div>
Use bg-cover
to scale the background image until it fills the background layer.
<div class="bg-cover bg-center ..." style="background-image: url(...)"></div>
Use bg-contain
to scale the background image to the outer edges without cropping or stretching.
<div class="bg-contain bg-center ..." style="background-image: url(...)"></div>
Use h-screen
to scale the background image to full screen.
<div class="h-screen bg-cover bg-center ..." style="background-image: url(...)"></div>
Resize an element’s content to cover its container using object-cover
.
<div class="bg-white ...">
<img class="object-cover h-48 w-96 ..." alt="...">
</div>
Resize an element’s content to stay contained within its container using object-contain
.
<div class="bg-white ...">
<img class="object-contain h-48 w-96 ..." alt="...">
</div>
Stretch an element’s content to fit its container using object-fill
.
<div class="bg-white ...">
<img class="object-fill h-48 w-96 ..." alt="...">
</div>
Display an element’s content at its original size but scale it down to fit its container if necessary using object-scale-down
.
<div class="bg-white ...">
<img class="object-scale-down h-48 w-96 ..." alt="...">
</div>
Display an element’s content at its original size ignoring the container size using object-none
.
<div class="bg-white ...">
<img class="object-none h-48 w-96 ..." alt="...">
</div>
Use scale-{percentage}
to scale the image on hover.
<div class="group flex-shrink-0 relative rounded-xl overflow-hidden w-56 sm:w-96 h-44 mx-auto">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full h-full absolute top-0 start-0 object-cover rounded-xl" src="..." alt="...">
</div>
Overlay image example.
<a class="group max-w-xs h-96 relative flex flex-col w-full min-h-[15rem] bg-center bg-cover rounded-xl hover:shadow-lg transition bg-[url('...')] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
<div class="flex-auto p-4 md:p-6">
<h3 class="text-xl text-white/[.9] group-hover:text-white"><span class="font-bold">Preline</span> Press publishes books about economic and technological advancement.</h3>
</div>
<div class="pt-0 p-4 md:p-6">
<div class="inline-flex items-center gap-2 text-sm font-medium text-white group-hover:text-white/[.7]">
Visit the site
<svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
</div>
</div>
</a>
Masonry example with overlay.
<!-- Grid -->
<div class="grid sm:grid-cols-12 gap-3">
<div class="sm:self-end col-span-12 sm:col-span-7 md:col-span-8 lg:col-span-5 lg:col-start-3">
<!-- Card -->
<a class="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
<div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3481&q=80" alt="Image Description">
</div>
<div class="absolute bottom-0 start-0 end-0 p-2">
<div class="font-semibold text-gray-800 rounded-lg bg-white p-3 dark:bg-gray-800 dark:text-gray-200">
Workplace personalities
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="sm:self-end col-span-12 sm:col-span-5 md:col-span-4 lg:col-span-3">
<!-- Card -->
<a class="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
<div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="..." alt="...">
</div>
<div class="absolute bottom-0 start-0 end-0 p-2">
<div class="font-semibold text-gray-800 rounded-lg bg-white p-3 dark:bg-gray-800 dark:text-gray-200">
Women in engineering
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-span-12 md:col-span-4">
<!-- Card -->
<a class="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
<div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="..." alt="...">
</div>
<div class="absolute bottom-0 start-0 end-0 p-2">
<div class="font-semibold text-gray-800 rounded-lg bg-white p-3 dark:bg-gray-800 dark:text-gray-200">
Pride 2021
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<!-- Card -->
<a class="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
<div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="..." alt="...">
</div>
<div class="absolute bottom-0 start-0 end-0 p-2">
<div class="font-semibold text-gray-800 rounded-lg bg-white p-3 dark:bg-gray-800 dark:text-gray-200">
Data at Preline
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<!-- Card -->
<a class="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
<div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="..." alt="...">
</div>
<div class="absolute bottom-0 start-0 end-0 p-2">
<div class="font-semibold text-gray-800 rounded-lg bg-white p-3 dark:bg-gray-800 dark:text-gray-200">
Empowered management
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Grid -->