How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?

A closer look at object-fit

The object-fit property offers a treasure trove of options for tailoring image fit:

• fill: Disregards the aspect ratio and stretches the image to fit the div.
• contain: Keeps the aspect ratio while fitting the entire image within the div.
• cover: Ensures the image covers the div, while maintaining its aspect ratio.
• none: The image keeps its original dimensions, doesn't resize to fit the div.
• scale-down: Picks the 'smallest version' between none and contain.

When object-fit doesn't fit

For vintage browsers that don't support object-fit, a fallback method is to set the image as a div background:

.div-background {
  background-image: url('path/to/image.jpg');
  background-size: cover; /* This ensures our friend aspect-ratio is respected */
  background-position: center; /* Just to make sure our div is looking sharp */
}


Remember to set the URL of your image in the background-image property, and the div dimensions for the image to scale perfectly.

Sizing matters

If the size of your div is being fickle, set your div dimensions using responsive units, such as percentages:

.responsive-div {
  width: 100%; /* Will always be as wide as mama-div allows. */
  height: 50vw; /* Height is half of viewport width, because why not? */
}


This ensures the div scales with the viewport or its parent container while maintaining your image intact.

jQuery strikes back

When dealing with unpredictable div sizes or image aspect ratios, runtime flexibility can save you. Here's where jQuery can chip in:

$(window).load(function() {
  // Enough time for the images to put on their makeup.
  $('.image-selector').each(function() {
    // Next we find out if our image is more of a landscape or portrait.
    var imageAspect = $(this).width() / $(this).height();
    if (imageAspect > 1) {
      // Image is as wide as your ex's lies.
      $(this).addClass('wide');
    } else {
      // And this, ladies and gents, is a vertical special.
      $(this).addClass('tall');
    }
  });
});


Then in CSS, assign Oscar-worthy styles to .wide and .tall classes.

Keeping it inside the lines

If your use-case calls for the image to proudly sit within a div without violating boundaries, use max-width: 100% and max-height: 100% for your image:

.img-max {
  max-width: 100%; /* because overflow ain't cute */
  max-height: 100%; /* let's not get over-ambitious */
}


This ensures the image will not exceed the div space and adapts to the div dimensions.

Going beyond object-fit

If object-fit is not cutting it for you, CSS transform is another viable ally:

.img-transform {
  width: auto; /* Let's be unpredictable */
  height: auto; /* See what widths and heights this world offers */
  max-width: 100%; /* Hold it right there */
  max-height: 100%; /* Height is capped at 100% for a reason */
  transform: scale(1.1); /* Phew! Just a smidge of extra scaling */
}


You can adjust the scale value for a sweeter fit, but remember, with overflowing power, comes overflowing responsibility.

Conclude that code

Coding is an art, and you just finished a piece. If this information has been helpful and you've been able to compose your masterpiece — do us all a favor and click that upvote. Happy coding!👩‍💻