<article>
<div class="container">
<h3>1. Default Value</h3>
<div class="img--container">
<img class="image-1" src="https://images.unsplash.com/photo-1610641987870-d6d8998274a4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=150" />
</div>
</div>
<div class="container">
<h3>2. object-position: left bottom;</h3>
<div class="img--container">
<img class="image-2" src="https://images.unsplash.com/photo-1610641987870-d6d8998274a4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=150" />
</div>
</div>
<div class="container">
<h3>3. object-position: 20% 80%;</h3>
<div class="img--container">
<img class="image-3" src="https://images.unsplash.com/photo-1610641987870-d6d8998274a4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=150" />
</div>
</div>
<div class="container">
<h3>4. object-position: 40px 60px;</h3>
<div class="img--container">
<img class="image-4" src="https://images.unsplash.com/photo-1610641987870-d6d8998274a4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=150" />
</div>
</div>
<div class="container">
<h3>5. object-position: right 75%;</h3>
<div class="img--container">
<img class="image-5" src="https://images.unsplash.com/photo-1610641987870-d6d8998274a4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=150" />
</div>
</div>
<div class="container">
<h3>6. object-position: 10px center;</h3>
<div class="img--container">
<img class="image-6" src="https://images.unsplash.com/photo-1610641987870-d6d8998274a4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=150" />
</div>
</div>
</article>
article {
margin: 0.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
gap: 0.5rem;
}
.img--container {
width: 20ch;
border: 1ch solid #1e88e5;
background: salmon;
}
img {
width: 100%;
display: block;
object-fit: none;
}
.image-1 {
object-position: 50% 50%;
}
.image-2 {
object-position: left bottom;
}
.image-3 {
object-position: 20% 80%;
}
.image-4 {
object-position: 40px 60px;
}
.image-5 {
object-position: right 75%;
}
.image-6 {
object-position: 10px center;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.