CSS 라이브 데모: object-fit 데모 버튼을 클릭해 보세요!
selector {
    object-fit: fill | contain | cover | none | scale-down;
}
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
실제 적용 모습
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
실제 적용 모습
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
실제 적용 모습
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
실제 적용 모습
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
실제 적용 모습
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
실제 적용 모습
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
.container {
    width: 300px;
    height: 100px;
    border:5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: none;
}
실제 적용 모습
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: none;
}
실제 적용 모습
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}
실제 적용 모습
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}
실제 적용 모습