CSS object-fit
The object-fit property specifies how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.
1. The Problem
Images have an intrinsic aspect ratio. If you set both width and height on an image to force it into a specific size (e.g., a square), the image will stretch and distort (squish) by default. object-fit fixes this.
2. Values
fill(Default): The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit.contain: The image keeps its aspect ratio, but is resized to fit within the given dimension. The image will be letterboxed if the aspect ratio doesn't match.cover: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.none: The image is not resized.scale-down: The image is scaled down to the smallest version ofnoneorcontain.
3. Examples
img {
width: 200px;
height: 200px;
border: 1px solid #000;
}
.fill {
object-fit: fill; /* Stretched */
}
.contain {
object-fit: contain; /* Letterboxed */
}
.cover {
object-fit: cover; /* Cropped */
}4. object-position
By default, the image is centered in its content box. You can use the object-position property to change this alignment (similar to background-position).
img {
width: 200px;
height: 200px;
object-fit: cover;
object-position: top center; /* Focus on the top part of the image */
}Values can be keywords (top, bottom, left, right, center) or percentages/lengths (50% 50%, 10px 20px).
programming/css/css programming/css/box-model programming/css/positioning