CSS:object-fit
lastmod 2025-03-06created 2021-10-293 edits
The object-fit property sets how the content of a replaced element (such as img, video, object, svg) is fitted to its specified width and height.
Example
img {
width: 100px;
height: 100px;
object-fit: cover; /* 아래에서 다룰 속성값 */
border: 1px solid #000 /* 요소의 크기를 가늠하기위해 추가 */
}
Put the object-fit property directly on the element itself (img). (Not on the parent element)
Properties
The values available for this property are as follows.
- fill
- Default. Resizes to exactly fit the given width and height. The image's aspect ratio is not preserved.
-
Object-fit-fill.jpeg
- contain
- Resizes while preserving the aspect ratio, but leaves empty space if the ratios of the image and the container don't match.
-
Object-fit-contain.jpeg
- cover
- Resizes while preserving the aspect ratio, and even if the ratios don't match, enlarges the image to completely fill the container.
-
Object-fit-cover.jpeg
- none
- Does nothing and keeps the original image size. Still, it's smart enough to show the center of the image.
-
Object-fit-none.jpeg
- scale-down
- Resizes the image in whichever of none or contain is more appropriate.
-
Object-fit-scale-down.jpeg