htmlcss

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

I have a 48x48 div and inside it there is an img element, I want to fit it into the div without losing any part, in the mean time the ratio is kept, is it achievable using html and css?

Solution

  • You will need some JavaScript to prevent cropping if you don't know the dimension of the image at the time you're writing the css.

    (function() {

  var img = document.getElementById('container').firstChild;
  img.onload = function() {
    if (img.height > img.width) {
      img.height = '100%';
      img.width = 'auto';
    }
  };

}());
    #container {
  width: 48px;
  height: 48px;
}

#container img {
  width: 100%;
}
    <div id="container">
  <img src="https://placehold.co/200" alt="" />
</div>

    If you use a JavaScript Library you might want to take advantage of it.