How can I fill a div with an image while keeping it proportional?

The nitty-grity explained, options included

In some specific scenarios, you might need to inject the image using an <img> element rather than as a background. By pairing object-fit: cover; with setting both width and height to 100%, the image completely fills its container while maintaining its proportion:

<!-- Because who doesn't like full-sized images? -->
<div style="width: 300px; height: 200px; overflow: hidden;">
  <img src="image.jpg" style="width: 100%; height: 100%; object-fit: cover;">
</div>


Preventing the overflow party

Whenever utilizing object-fit, parts of the image might end up outside of your container. HANDLE the situation by setting your container div overflow property to hidden;, avoiding pesky scrollbars and maintaining the dope layout.

Responsively fitting images and viewport units

Aiming for a responsive design? Bet. Use viewport units (vw/vh) for the dimensions of your container. The viewport units with object-fit: cover combo guarantees your image scales in harmony across all devices :

/* Responsive div always fits in at the party */
.responsive-div {
  width: 100vw;
  height: 50vh;
  overflow: hidden;
}
/* Responsive image always pairs well with responsive div */
.responsive-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


Mastering it all with the background property shorthand

Lucky for us, CSS includes a shorthand background property that clubs all background- specific properties. This comes in handy when trying to control the size of a transparent gif or image using background properties:

/* Transparent gif, invisible to the human eye but not to CSS */
.div-with-background {
  background: url('transparent.gif') url('image.jpg') center / cover no-repeat;
}


Constraint the image with max/min properties

Sometimes you just want to control the image size while still allowing some flexibility. Apply max-width, max-height, min-width, and min-height to constrain those liberal dimensions, especially when dealing with fluid layouts :

.controlled-size-img {
  max-width: 100%; /* "You shall not pass!" - Gandalf (or your CSS) */
  max-height: 100%; /* Seriously, you shall not pass */
  min-width: 50%; /* At least try to fill half of me */
  min-height: 50%; /* Like I said, AT LEAST 50 */
  object-fit: cover;
}


Cross-browser compatibility matters

The object-fit as helpful as it is, unfortunately might not be supported by all browsers, especially the grandpas in the browser-world. No worries though - consider using polyfills, or alternative methods like resorting back to our good friend background-size for background images.

Viable Alternatives to object-fit

If object-fit is acting pricey and not viable, fear not. We have another workaround. Just pop in a transparent gif as a placeholder in the img tag, and set the real image as a background with background-size: cover;:

<div style="width: 300px; height: 200px; overflow: hidden;">
  <img src="transparent.gif" style="background: url('image.jpg') center / cover no-repeat; width: 100%; height: 100%;">
</div>


This strategy leverages the layout properties of the img tag whilst controlling the background image's size. It's basically a two-for-one deal!