3 min read
•Question 25 of 49easyHow Does object-fit Work?
Understanding image and video sizing.
What You'll Learn
- object-fit values
- object-position
- Common use cases
object-fit Values
| Value | Behavior |
|---|---|
| fill | Stretch to fill (default) |
| contain | Fit inside, maintain ratio |
| cover | Cover area, maintain ratio |
| none | Original size |
| scale-down | Smaller of none/contain |
Examples
styles.cssCSS
.image {
width: 300px;
height: 200px;
}
/* Cover - like background-size: cover */
.image-cover {
object-fit: cover;
}
/* Contain - like background-size: contain */
.image-contain {
object-fit: contain;
}object-position
styles.cssCSS
.image {
object-fit: cover;
object-position: top; /* Focus on top */
object-position: 50% 25%; /* Custom position */
}