Object-fit for images and media in Tailwind - Mini Project: Build & Apply

Using Object-fit with Images in Tailwind CSS

📖 Scenario: You are creating a simple webpage to display a profile picture. The image should fit nicely inside a square container without stretching or cutting off important parts.

🎯 Goal: Build a webpage with a square container that holds an image. Use Tailwind CSS classes to make the image cover the container area while keeping its aspect ratio using object-fit.

📋 What You'll Learn

Create a square container of 16rem by 16rem using Tailwind CSS

Add an image inside the container with the source https://via.placeholder.com/300

Use Tailwind CSS classes to apply object-cover so the image covers the container without distortion

Make sure the image fills the container fully and is centered

Use semantic HTML and include alt text for accessibility

💡 Why This Matters

🌍 Real World

Images often need to fit nicely inside fixed-size areas on websites, such as profile pictures, product photos, or banners. Using object-fit helps keep images looking good without distortion.

💼 Career

Web developers frequently use Tailwind CSS to style images responsively and accessibly. Understanding object-fit classes is essential for creating polished user interfaces.

1

Create the HTML structure with a container and image

Write the basic HTML structure with a <div> container having the class w-64 h-64 and an <img> inside it with the src set to https://via.placeholder.com/300 and alt text as Profile picture.

Tailwind

Need a hint?

Use a <div> with Tailwind classes w-64 and h-64 for width and height. Add an <img> with the given src and alt.

2

Add Tailwind class to make the image fill the container

Add the Tailwind CSS class w-full h-full to the <img> tag so the image fills the entire container.

Tailwind

Need a hint?

Use w-full and h-full classes on the <img> to make it fill the container's width and height.

3

Apply object-fit cover to the image

Add the Tailwind CSS class object-cover to the <img> tag to ensure the image covers the container area without distortion.

Tailwind

Need a hint?

Add the object-cover class to the image to keep its aspect ratio while filling the container.

4

Center the image content inside the container

Add the Tailwind CSS class object-center to the <img> tag to center the image inside the container.

Tailwind

Need a hint?

Use object-center to center the image content inside the container.