Fit image in container

CSS, Layout, Visual

Fits an positions an image appropriately inside its container while preserving its aspect ratio.

  • Use object-fit: contain to fit the entire image within the container while preserving its aspect ratio.
  • Use object-fit: cover to fill the container with the image while preserving its aspect ratio.
  • Use object-position: center to position the image at the center of the container.
Preview
<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />
.image {
  background: #34495e;
  border: 1px solid #34495e;
  width: 200px;
  height: 200px;
}

.image-contain {
  object-fit: contain;
  object-position: center;
}

.image-cover {
  object-fit: cover;
  object-position: right top;
}

Recommended snippets

  • What are CSS variables and where can I use them?

    CSS, Article

    Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs.

  • Flexbox Cheat Sheet

    CSS, Article

    Flexbox allows you to create fluid layouts easily. If you find yourself constantly looking up the syntax or how it work, this handy cheatsheet is all you need.

  • Menu on image hover

    CSS, Layout

    Displays a menu overlay when the user hovers over the image.