The object-fit property specifies how the content of a replaced element such as <img> or <video> is scaled/fitted within its content box — similar to background-size for backgrounds.img {
object-fit: cover;
}.thumbnail {
object-fit: contain;
background: #f0f0f0;
}fillThe content is stretched to fill the content box (default value). Original aspect ratio is not preserved.containThe content is scaled to fit entirely within the box while preserving aspect ratio; empty space (letterboxing) may appear.coverThe content is scaled to cover the entire box while preserving aspect ratio; parts may be clipped.noneThe content is not resized — remains at its intrinsic size; may be clipped or leave empty space.scale-downContent is sized as the smaller of none or contain — preserves aspect ratio and does not enlarge beyond intrinsic size.CSS Images Module Level 3Editor's DraftW3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
