How can I fill a div with an image while keeping it proportional?

Question

I found this thread — How do you stretch an image to fill a <div> while keeping the image's aspect-ratio? — that is not entirely the thing that I want.

I have a div with a certain size and an image inside of it. I want to always fill-out the div with the image regardless if the image is landscape or portrait. And it doesn't matter if the image is cut-off (the div itself has overflow hidden).

So if the image is portrait I want the width to be 100% and the height:auto so it stays in proportion. If the image is landscape I want the height to be 100% and the width to beauto`. Sounds complicated right?

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

Since I don't know how to do it I simply created a quick image of what I mean. I can't even properly describe it.

So, I guess I'm not the first one asking this. However I couldn't really find a solution to this. Maybe there is some new CSS3 way of doing this - I'm thinking of flex-box. Any idea? Maybe it's even easier than I expect it to be?

Answer 1

If I correctly understand what you want, you may leave the width and height attributes off the image to maintain aspect ratio and use flexbox to do the centering for you.

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

<div class="fill">
    <img src="https://picsum.photos/id/237/320/240" alt="" />
</div>

JSFiddle here

I tested this successfully in IE9, Chrome 31, and Opera 18. But no other browsers were tested. As always you must consider your particular support requirements.

Answer 2

It's a bit late but I just had the same problem and finally solved it with the help of another stackoverflow post (https://stackoverflow.com/a/29103071).

img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

Hope this still helps somebody.

Ps: Also works together with max-height, max-width, min-width and min-height css properties. It's espacially handy with using lenght units like 100% or 100vh/100vw to fill the container or the whole browser window.

Answer 3

This should do it:

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}

Answer 4

All answers below have fixed width and height, which makes solution "not responsive".

To achieve the result but keep image responsive I used following:

1. Inside container place a transparent gif image with desired proportion
2. Give an image tag inline css background with image you want to resize and crop

HTML:

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​

Answer 5

An old question but deserves an update as now there is a way.

The correct CSS based answer is to use object-fit: cover, which works like background-size: cover. Positioning would be taken care of by object-position attribute, which defaults to centering.

But there is no support for it in any IE / Edge browsers, or Android < 4.4.4. Also, object-position is not supported by Safari, iOS or OSX. Polyfills do exist, object-fit-images seems to give best support.

For more details on how the property works, see CSS Tricks article on object-fit for explanation and demo.

Answer 6

You can achieve this using css flex properties. Please see the code below

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

Answer 7

Here is an answer with support to IE using object-fit so you won't lose ratio

Using a simple JS snippet to detect if the object-fit is supported and then replace the img for a svg

//ES6 version
if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('img[data-object-fit]').forEach(image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}

//ES5 version
if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', function() {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]').forEach(function(image) {
      (image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat 50%/").concat(image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit'));
      image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E");
    }));
  });
}

img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}


/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

---

Note: There are also a few object-fit polyfills out there that will make object-fit work.

Here are a few examples:

• object-fit-images
• constancecchen /object-fit-pollyfill
• Polyfill for CSS object-fit property

Answer 8

Consider using background-size: cover (IE9+) in conjunction with background-image. For IE8-, there is a polyfill.

Answer 9

The only way I achieved the "best case" scenario described, was putting the image as a background:

<div class="container"></div>​

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​

Answer 10

Try this:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

Hope this helps

Answer 11

.image-wrapper{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}
.image-wrapper img {
    object-fit: contain;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

<div class="image-wrapper">
  <img src="">
</div>

Answer 12

Here you have my working example. I have used a trick that is setting the image as background of the div container with background-size:cover and background-position:center center

I have placed the image with width:100% and opacity:0 making it invisible. Note that I am showing my image only because I have an special interest on calling the child click event.

Please note that altought I am ussing angular it is completely irrelevant.

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

The result is the one that you define as optimal in all cases

Answer 13

You can use div to achieve this. without img tag :) hope this helps.

.img{
 width:100px;
 height:100px;
 background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
 background-repeat:no-repeat;
 background-position:center center;
 border:1px solid red;
 background-size:cover;
}
.img1{
 width:100px;
 height:100px;
 background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
 background-repeat:no-repeat;
 background-position:center center;
 border:1px solid red;
 background-size:cover;
}

<div class="img"> 
</div>
<div class="img1"> 
</div>

Answer 14

The CSS object-fit: cover and object-position: left center property values now address this issue.

Answer 15

A simple way I figured out to do this is by using object-fit: cover on the img inside the container

<div class="container"> 
  <img class="image" src="https://mymodernmet.com/wp/wp-content/uploads/2020/11/International-Landscape-Photographer-Year-PhotographER-1st-KelvinYuen-2.jpg">
</div>

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

.container {
  height: 100px; /*Set any dimensions you like*/
  width: 50px;
}

As far as I tested, this works regardless of the dimensions of the image to use, and this satisfies the "Best case" as you state in the question, since the result is vertically and horizontally centered.

Answer 16

Just fix the height of the image & provide width = auto

img{
    height: 95vh;
    width: auto;
}