How to Fill a Div with an Image While Keeping It Proportional

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

Update 2019.

You can now use the object-fit css property that accepts the following values: fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

As an example, you could have a container that holds an image:

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;
}

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

Fill a div with an image respecting aspect ratio

Consider using the CSS object-fit property.

5.5. Sizing Objects: the object-fit
property

The object-fit property specifies how the contents of a replaced
element should be fitted to the box established by its used height and
width.

Here are two of the values:

cover

The replaced content is sized to maintain its aspect ratio while
filling the element's entire content box.

contain

The replaced content is sized to maintain its aspect ratio while
fitting within the element's content box.

So, with cover the image retains its aspect ratio and covers all available space. Of course, this means that much of an image may be cropped off-screen.

With contain the aspect ratio is also maintained, but the image scales to fit within the box. This means that an image may have whitespace on the left and right, or top and bottom.

Browser Compatibility

As of this writing, object-fit is not supported by Internet Explorer. For a workaround see:

Neat trick for CSS object-fit fallback on Edge (and other browsers)
fitie - An object-fit polyfill for Internet Explorer
object-fit-images - Adds support for object-fit on IE9, IE10, IE11, Edge and other old browsers
Polyfill (mostly IE) for CSS object-fit property to fill-in/fit-in images into containers.

More information

MDN object-fit property
CSS-Tricks object-fit property
object-fit browser support @ caniuse.com

Scale image proportionally within a div

The following will keep an image horizontally aligned within a div (use the full page link and change the browser size to see the image change size)

#wrap {  border:1px solid #000000;  position: relative;  width: 50%;  height: 400px;  overflow:hidden;}#wrap > img {  width: 100%;  position:absolute;   top:50%;   transform: translateY(-50%);}

<div id="wrap">    <img src="http://lorempixel.com/800/800/city/1/" alt="Sample Image" /></div>

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

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.

HTML & JavaScript

<div id="container">
    <img src="something.jpg" alt="Sample Image" />
</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%;
}

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

Scale Img Proportionally to Fill Entire Container without CSS Cover (javascript/React)

Actually, it's not cropping, but when you transform an element, it keeps it's props like width, height, so the object-fit: cover will give the same result, consider it as transforming an encapsulated box that keeps it's own behavior and style,

as a solution to achieve what you need, you can make the container works as a window for the image, without using object-fit for the image,

ex:

for the container you can add:

  overflow: "hidden"

then for the image you can have it styled like this:

const bgImageStyle = {
  width: "100%",
  maxWidth: "100%",
};

Note that: using width in this example is okay when having a portrait orientation image, you may need to replace it with height and max-height if it's a landscape orientation image

CSS force image resize and keep aspect ratio

img {  display: block;  max-width:230px;  max-height:95px;  width: auto;  height: auto;}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">