How do I fit an image (img) inside a div and keep the aspect ratio?

Working with specific div dimensions

Setting fixed dimensions

Ensure your container div has fixed dimensions, this sets the stage to perfectly size your content. For example, with a div of 48x48 pixels, set:

.container {
  width: 48px;
  height: 48px;
}


Then apply the container class to your div:

<div class="container">
  <img src="image.jpg" alt="" class="img-fit">
</div>


Fall back to JavaScript for legacy browsers

It's important to remember that the object-fit property may not always work due to browser compatibility issues, especially with IE. In such cases, utilizing a JavaScript fallback can be a lifesaver:

function adjustImage(image) {
  // Because square images are hip right?
  var containerAspectRatio = 1; // 48px/48px
  // Do the math
  var imageAspectRatio = image.width / image.height;
  
  if (imageAspectRatio <= containerAspectRatio) {
    // When in doubt, go full width!
    image.style.width = '100%';
    image.style.height = 'auto';
  } else {
    // Oops! Went too wide. Let's try full height.
    image.style.width = 'auto';
    image.style.height = '100%';
  }
}

// Pick one, any one (image)
var imgElement = document.querySelector('.img-fit');
imgElement.onload = function() {
  // Let's get adjusting
  adjustImage(imgElement);
};


Improve performance with JavaScript libraries

Consider using JS libraries like Lodash or Underscore for throttling or debouncing the adjustImage function for a significant performance boost.

Advanced applications in Responsive CSS

Aspect ratio for responsive design

In the world of modern CSS, the aspect-ratio property provides greater control:

.responsive-container {
  aspect-ratio: 1 / 1; // Perfect square, no more, no less!
}


Apply this class to your container div and it will maintain a square aspect ratio even as the div's size alters.

Deliver backup image for unsupported formats

Providing a backup image is always a good idea in case a certain image format isn't supported:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="" class="img-fit"><!-- Oldie but a goodie -->
</picture>


Overflow for any overspill

Utilizing the overflow property in combination with flexbox on the container div allows for centering and managing any overspill, especially if the images are larger:

.frame {
  width: 48px;
  height: 48px;
  overflow: hidden; // Don't let it spill out, please!
  display: flex;
  justify-content: center;
  align-items: center;
}


Utilize srcset for different resolutions

Use the srcset attribute for images, which provides multiple sources based on the resolution to allow the browser to choose the best one:

<img src="image.jpg" srcset="image-320w.jpg 320w, image-480w.jpg 480w," sizes="(max-width: 320px) 280px, 440px" alt="" class="img-fit">
