CSS Object-Fit and Object-Position Practice Questions with Solutions

By /

Introduction

CSS object-fit and object-position control how images and videos fit inside a specified container. object-fit determines whether the media should stretch, contain, cover, or keep its original size, while object-position controls which part of the media is displayed inside the container. These properties are especially useful for responsive image cards, galleries, profile pictures, thumbnails, and video layouts. CSS Object-Fit and Object-Position practice questions with solutions help to build concepts.

Question 1: Use object-fit: cover

Problem Statement

Create an image with a fixed width and height that completely fills its container without stretching.

CSS Code

.image {<br>    width: 300px;<br>    height: 200px;<br>    object-fit: cover;<br>}

Output

The image completely fills the 300px × 200px area while maintaining its aspect ratio.

Explanation

  • width and height define the image container dimensions.
  • object-fit: cover fills the entire area.
  • Parts of the image may be cropped.
  • The image does not become distorted.

Question 2: Use object-fit: contain

Problem Statement

Write CSS to fit an image completely inside a fixed container without cropping it.

CSS Code

.image {<br>    width: 300px;<br>    height: 200px;<br>    object-fit: contain;<br>}

Output

The complete image remains visible inside the 300px × 200px area.

Explanation

  • object-fit: contain preserves the complete image.
  • The image maintains its original aspect ratio.
  • Empty space may appear inside the container.

Question 3: Use object-fit: fill

Problem Statement

Write CSS to make an image fill its container completely, even if its original aspect ratio changes.

CSS Code

.image {<br>    width: 300px;<br>    height: 200px;<br>    object-fit: fill;<br>}

Output

The image fills the entire container.

Explanation

  • fill stretches the replaced content to match the specified dimensions.
  • The original aspect ratio is not necessarily preserved.
  • This can make an image appear distorted.

Question 4: Use object-fit: none

Problem Statement

Write CSS to display an image at its original rendered size instead of scaling it to fit the container.

CSS Code

.image {<br>    width: 300px;<br>    height: 200px;<br>    object-fit: none;<br>}

Output

The image is not scaled to fill the container.

Explanation

  • object-fit: none keeps the replaced content at its natural size.
  • If the image is larger than the content box, portions of it can extend beyond the box’s visible area.
  • This is different from cover, which scales the image to fill the box.

Question 5: Position the Image at the Top

Problem Statement

Write CSS to display a covered image while keeping its visible area positioned at the top of the container.

CSS Code

.image {<br>    width: 300px;<br>    height: 200px;<br>    object-fit: cover;<br>    object-position: top;<br>}

Output

The image fills the container, with the top portion prioritized when cropping occurs.

Explanation

  • object-fit: cover fills the container.
  • object-position: top controls which part remains visible.
  • This technique is useful for portraits and profile images where the upper portion is important.

Question 6: Center the Image with object-position

Problem Statement

Write CSS to make an image cover its container while keeping the center of the image visible.

CSS Code

.image {<br>    width: 300px;<br>    height: 200px;<br>    object-fit: cover;<br>    object-position: center;<br>}

Output

The image fills the container while its center area remains visible.

Explanation

  • object-fit: cover fills the entire container.
  • object-position: center places the image at the center.
  • This is useful when the subject of an image is positioned near its center.

Question 7: Position an Image to the Right

Problem Statement

Write CSS to fill a container with an image while keeping the right side of the image visible.

CSS Code

.image {
    width: 300px;
    height: 200px;
    object-fit: cover;
    object-position: right;
}

Output

The image fills the container, with its right portion prioritized during cropping.

Explanation

  • object-fit: cover fills the available area.
  • object-position: right shifts the visible area toward the right.
  • This is useful when the important subject is located on the right side of an image.

Question 8: Use Percentage Values with object-position

Problem Statement

Write CSS to position the visible area of a covered image at 25% horizontally and 75% vertically.

CSS Code

.image {
    width: 300px;
    height: 200px;
    object-fit: cover;
    object-position: 25% 75%;
}

Output

The image is positioned according to the specified horizontal and vertical percentages.

Explanation

  • The first value controls the horizontal position.
  • The second value controls the vertical position.
  • Percentage values provide more precise positioning than keywords such as center or top.

Question 9: Create a Responsive Thumbnail

Problem Statement

Write CSS for a thumbnail that is 250px wide and 150px high, fills its box without distortion, and keeps the image centered.

CSS Code

.thumbnail {<br>    width: 250px;<br>    height: 150px;<br>    object-fit: cover;<br>    object-position: center;<br>}

Output

The thumbnail fills its 250px × 150px area while maintaining the image’s aspect ratio.

Explanation

  • object-fit: cover prevents unwanted stretching.
  • object-position: center keeps the central area visible.
  • This combination works well for blog thumbnails, product cards, and galleries.

Question 10: Create a Profile Image

Problem Statement

Create a circular profile image that is 150px × 150px, keeps its aspect ratio, and prioritizes the top-center portion of the image.

CSS Code

.profile {<br>    width: 150px;<br>    height: 150px;<br>    object-fit: cover;<br>    object-position: center top;<br>    border-radius: 50%;<br>}

Output

The image appears as a circular profile picture, with the top-center portion prioritized when cropping occurs.

Explanation

  • width and height create a square image area.
  • object-fit: cover fills the square without distortion.
  • object-position: center top keeps the top-center area visible.
  • border-radius: 50% creates the circular shape.

Key Takeaways

  • object-fit controls how replaced content such as images and videos fits inside its content box.
  • cover fills the box while preserving the aspect ratio and may crop the content.
  • contain keeps the complete content visible and may leave empty space.
  • fill stretches the content to match the box dimensions.
  • none displays the content at its natural size rather than scaling it to fit.
  • object-position controls the position of the replaced content inside its box.
  • Keywords such as top, center, and right make positioning simple.
  • Percentage values provide more precise positioning.
  • object-fit and object-position are especially useful for responsive images, thumbnails, profile pictures, and galleries.

Frequently Asked Questions (FAQs)

1. What does object-fit do?

object-fit controls how replaced content, such as an image or video, fits inside its specified width and height.

2. What does object-fit: cover do?

It scales the content to completely cover the content box while preserving its aspect ratio. Some content may be cropped.

img {
    object-fit: cover;
}

3. What does object-fit: contain do?

It scales the content so that the complete image or video remains visible inside the content box. Empty space may remain.

img {
    object-fit: contain;
}

4. What is object-position used for?

object-position controls where the replaced content is positioned inside its content box.

Example:

img {
    object-fit: cover;
    object-position: top;
}

5. Can I use percentages with object-position?

Yes. You can specify horizontal and vertical positions using percentages.

img {
    object-position: 25% 75%;
}

6. Can object-fit be used with videos?

Yes. object-fit can also control how video content fits inside its content box.

7. How can I create a circular profile image?

Use object-fit: cover together with equal width and height and border-radius: 50%.

.profile {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
}

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top