CSS object-fit


img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;

.fill {
  object-fit: fill;

.contain {
  object-fit: contain;

.cover {
  object-fit: cover;

.none {
  object-fit: none;

.scale-down {
  object-fit: scale-down;

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

Mozilla Hacks – Exploring object-fit
Mozilla Developer Network: object-fit

I still want something like aspect-ratio() in CSS though, because setting aspect-ratios on elements right now is a nasty hack. #pavethecowpaths

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.