Rectangle 27 1

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


.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}
<div class="fill"></div>
background-size: cover;

I was having trouble getting the other stretching methods to work consistently with wkhtmltopdf. This worked for me.

There is a much easier way to do this using only CSS and HTML:

This will place your image as the background, and stretch it to fit the div size without distortion.

This worked out for me, you can see it on the gallery in here bodas360.com.mx

is this possible with an undefined number of images ?

not exactly what I was looking for but interesting anyway!

Note
Rectangle 27 1

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


$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

That will resize the image so that it will always fit inside the parent element, regardless of it's size. And as it's binded to the $(window).resize() event, when user resizes the window, the image will adjust.

That's impossible with just HTML and CSS, or at least wildly exotic and complicated. If you're willing to throw some javascript in, here's a solution using jQuery:

This does not try to center the image in the container, that would be possible but I guess that's not what you're after.

Note
Rectangle 27 1

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


$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})
.container img {
   width: 100%;
}
.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}
<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

@Mottie is there a way to fit a image of size 930 px width to a container of 960 px without losing the image quality

Can the user see the image before the resize? Anyone tested this?

Since you don't know the aspect ratio, you'll have to use some scripting. Here is how I would do it with jQuery (demo):

The solution is almost right, you just have to invert the height and width in the css : if the image is 'tall', then the width should be 100% not the height (wich will be bigger and overflowing). The other way around for the wide photos.

Why is this the accepted answer. The question is about images being too small for their container. i.e. how can an image be scaled up to fill its container's width or height, without fudging up the image's aspect ratio. Also, in your demo, removing the width:auto or height:auto properties does not affect the display of your images. As a matter of fact, of all the properties you're applying to the image, only max-width: 100% has any effect at all, and it only effects the landscape image. But most importantly, your answer does not help stretch a small image to fill a larger container.

Note
Rectangle 27 1

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


#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}
zoom

I wish this worked in Firefox. Why no zoom love from Firefox!?

Love the zoom CSS! Much nicer than JS.

No firefox === not an accepted solution imo

Not a perfect solution, but this CSS might help. The zoom is what makes this code work, and the factor should theoretically be infinite to work ideally for small images - but 2, 4, or 8 works fine in most cases.

Tempted to say this should be the accepted solution, as it doesn't use JS/JQuery.

Note
Rectangle 27 1

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


$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

That will resize the image so that it will always fit inside the parent element, regardless of it's size. And as it's binded to the $(window).resize() event, when user resizes the window, the image will adjust.

That's impossible with just HTML and CSS, or at least wildly exotic and complicated. If you're willing to throw some javascript in, here's a solution using jQuery:

This does not try to center the image in the container, that would be possible but I guess that's not what you're after.

Note
Rectangle 27 1

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


$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});
.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}
<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

Using this method you can fill in your div with the image varying ratio of divs and images.

Note
Rectangle 27 1

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


<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}

but i didn't find how to make it work with #pic { background:url(img/menu.png)} Enyone? Thanks

if you working with IMG tag, it's easy.

made a change and found an answer to my problem! nope it will help to someone. background-image: url(images/menu.png); background-repeat: no-repeat; position: absolute; background-size: 300px; height: 100%; width: 100%; and you can change value of background-size using javascript or jquery ( .attr({ 'style':'background-size:150px auto; left:50px; top:50px;' }) )

Note
Rectangle 27 1

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


.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}
<div class="fill"></div>
background-size: cover;

I was having trouble getting the other stretching methods to work consistently with wkhtmltopdf. This worked for me.

There is a much easier way to do this using only CSS and HTML:

This will place your image as the background, and stretch it to fit the div size without distortion.

This worked out for me, you can see it on the gallery in here bodas360.com.mx

is this possible with an undefined number of images ?

not exactly what I was looking for but interesting anyway!

Note
Rectangle 27 1

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


(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);
<div>
  <img src="image.png" class="cover-image">
</div>
background-size: cover
div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
img {
  object-fit: cover;
}
jQuery('.cover-image').coverImage();

I was looking for a pure CSS solution to have images fill a given container without using background-image & background-size and the CSS code here works great for >=IE9 and modern browsers. CodePen demo here

If you can, use background images and set background-size: cover. This will make the background cover the whole element.

If you're stuck with using inline images there are a few options. First, there is

In Pure CSS, I removed min- and change to width: 100%; height: 100%; and work! awesome solution! +1 Thanks!

It will take an image, set it as a background image on the image's wrapper element and remove the img tag from the document. Lastly you could use

Sadly, browser support is not that great with IE up to version 11 not supporting it at all. The next option uses jQuery

Use the plugin like this

You might use this as a fallback. The image will scale up to cover it's container but it won't scale down.

background-size: contain is also useful if you want none of the image to ever be clipped.

Note
Rectangle 27 1

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


#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}
zoom

I wish this worked in Firefox. Why no zoom love from Firefox!?

Love the zoom CSS! Much nicer than JS.

No firefox === not an accepted solution imo

Not a perfect solution, but this CSS might help. The zoom is what makes this code work, and the factor should theoretically be infinite to work ideally for small images - but 2, 4, or 8 works fine in most cases.

Tempted to say this should be the accepted solution, as it doesn't use JS/JQuery.

Note