CSS Object Position
Control how images and videos are positioned within their containers
🖼️ What is Object Position?
The
object-position
property specifies how an image or video should be positioned within its container when using
object-fit
.
/* Basic object-position example */
img {
width: 300px;
height: 200px;
object-fit: cover;
object-position: center top;
}
Output:
Object Position Values
Keywords
Use position keywords
object-position: center;
object-position: top left;
object-position: bottom right;Percentages
Use percentage values
object-position: 25% 75%;
object-position: 0% 100%;
object-position: 50% 0%;Length Units
Use px, em, rem values
object-position: 10px 20px;
object-position: 2em 1rem;
object-position: -10px 50%;Mixed Values
Combine different units
object-position: left 20px;
object-position: 25% top;
object-position: center 2em;🔹 Common Object Position Examples
Common object-position values address specific visual requirements in responsive image layouts. The object-position: center value is default and works well for general-purpose images, while object-position: top emphasizes upper portions, ideal for portrait crops. For product images, object-position: center ensures focus remains on the product itself. In mapping applications, object-position can center on specific coordinates. Landscape photography often uses object-position: center 30% to follow the rule of thirds. These practical examples demonstrate how strategic positioning enhances visual communication, directs viewer attention, and improves overall design quality across diverse content types.
/* Center the image */
.center-image {
width: 200px;
height: 150px;
object-fit: cover;
object-position: center;
}
/* Focus on top of image */
.top-focus {
width: 200px;
height: 150px;
object-fit: cover;
object-position: center top;
}
/* Custom positioning */
.custom-position {
width: 200px;
height: 150px;
object-fit: cover;
object-position: 25% 75%;
}Output:
🔹 Object Position with Object Fit
Object-position achieves optimal results when precisely paired with specific object-fit values for controlled image presentation. When using object-fit: cover, object-position determines the cropping focus area, while with object-fit: contain, it controls alignment within letterboxed or pillarboxed areas. The combination becomes particularly powerful for responsive designs where containers change proportions across breakpoints. For example, mobile screens might use object-position: top with object-fit: cover to emphasize upper image regions, while desktop versions use center positioning. This strategic pairing ensures key visual content remains appropriately framed regardless of viewport dimensions, enhancing both aesthetics and communication effectiveness.
/* Cover with custom position */
.hero-image {
width: 100%;
height: 300px;
object-fit: cover;
object-position: center 20%; /* Focus on upper part */
}
/* Contain with positioning */
.thumbnail {
width: 150px;
height: 150px;
object-fit: contain;
object-position: left center;
border: 2px solid #ddd;
}
/* Fill with offset */
.banner {
width: 400px;
height: 200px;
object-fit: fill;
object-position: right bottom;
}Output:
