CSS Object Fit

CSS Object Fit — a practical guide to CSS object-fit with clear examples you can reuse in real projects.

CSS Tutorial Series (88/109). Prefer one article? Read the complete CSS tutorial.

Short description

cover/contain are essential for card thumbnails and avatars.

Object fit

.thumb {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  object-position: center;
}