Fitting an img inside a div and keeping the aspect ratio

Fitting an img inside a div and keeping the aspect ratio

2019-05-14 20:04 Posted in Learn with CSS

To achieve that, we need some JavaScript to prevent cropping if you don’t know the dimension of the image at the time you’re writing the css.

HTML & JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function () {
var img = document.getElementById('container').firstChild;
img.onload = function () {
    if (img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};
}());
</script>

CSS

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

#container img {
   width: 100%;
}