Object fit in CSS - Mini Project: Build & Apply

Using CSS Object Fit to Control Image Display

📖 Scenario: You are creating a simple webpage that shows a profile picture inside a fixed-size box. The image might have different sizes and shapes, so you want to control how it fits inside the box without stretching or cutting off important parts.

🎯 Goal: Build a webpage with a fixed-size image container and use the CSS object-fit property to make the image fit nicely inside the container.

📋 What You'll Learn

Create an HTML structure with a container and an image inside it.

Set the container size to 200px by 200px.

Use CSS to apply object-fit property to the image.

Try different object-fit values: cover, contain, and fill.

Make sure the image is responsive and accessible.

💡 Why This Matters

🌍 Real World

Websites often need to display images of different sizes inside fixed spaces without distortion. Using object-fit helps keep images looking good and consistent.

💼 Career

Front-end developers use CSS object-fit to create visually appealing and accessible image layouts in real projects.

1

Create the HTML structure with a container and an image

Write the HTML code to create a <div> with class image-container and inside it place an <img> tag with src="https://via.placeholder.com/300x150" and alt="Profile picture".

CSS

Need a hint?

Use a <div> with class image-container and inside it add an <img> tag with the exact src and alt attributes.

2

Set the container size with CSS

Add CSS to set the .image-container class width and height to 200px each, and add a border of 2px solid black to see the container edges.

CSS

.image-container {
  /* Set width and height to 200px */
  /* Add a 2px solid black border */
}



  

Need a hint?

Use CSS properties width, height, and border inside the .image-container selector.

3

Apply object-fit: cover to the image

Add CSS to the img inside .image-container to set its width and height to 100% and apply object-fit: cover; so the image covers the container without distortion.

CSS

.image-container {
  width: 200px;
  height: 200px;
  border: 2px solid black;
}
.image-container img {
  /* Set width and height to 100% */
  /* Add object-fit: cover */
}



  

Need a hint?

Inside the .image-container img selector, set width and height to 100% and add object-fit: cover;.

4

Try object-fit: contain and add accessibility improvements

Change the object-fit property value to contain in the CSS for the image. Also, add aria-label="Profile picture container" to the div with class image-container for accessibility.

CSS

.image-container {
  width: 200px;
  height: 200px;
  border: 2px solid black;
}
.image-container img {
  width: 100%;
  height: 100%;
  /* Change object-fit to contain */
}



  

Need a hint?

Change object-fit to contain and add aria-label="Profile picture container" to the div with class image-container.