Fit image to parent div's size

Question

I have made a div (div1), which is equal to the browser window size. Then I have made another div (div2) inside the parent div (div1). Then I have placed an image inside the second div (div2). My browser window size is 1360X638 and my image size is 1600*1200.

I want the image to fit itself according to the parent div's (div1) size. So the image (which is larger than the window size) have to fit itself to the second div (div2), which is equal to window size), and this image will fit exactly to the div's size (so, there isn't any scrolling or cropping of image in the display).

I have searched for some time. The solution I found is to set the maximum height and width to 100%. I did this.

I wrote this part:

<div style="max-width: 100%; max-height: 100%; background-color: red; margin-right: 0px; padding: 2 2 2 2; overflow:visible;">
    <div style="max-height: 100%; max-width: 100%;">
        <img style="max-width: 100%; max-height: 100%; overflow:visible;" src="1.jpg" />
    </div>
</div>

The output is like this:

Enter image description here

You can see there is a scroll in the right side. I don't want that there.

This looks like a dup : http://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang — hendr1x, Aug 07 '13 at 16:09
did you check by "background-size:cover;" look at example on http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover — Atif, Aug 07 '13 at 16:27
There is a fundamental problem here. Your image has an aspect ratio that may differ from your viewport (browser window) aspect ratio. In some cases, you will need to use max-width if the viewport is taller than your image, and max-height if your viewport is wider than your image. You need some JavaScript/jQuery to help you set the right style whenever you resize the window. — Marc Audet, Aug 07 '13 at 16:38
@MarcAudet: thanks! your answer is helpful. you have unlocked a new point of view. :) — syd, Aug 07 '13 at 17:17

score 9 · Accepted Answer · edited May 23 '17 at 12:01

jQuery Solution - Proof of Concept

Suppose you have the following HTML:

<div class="container">
    <img src="http://placehold.it/1600x1200" />
</div>

You can apply the following CSS rules to size an image to fit the view port (100% of browser width or height):

html, body {
    height: 100%;
    margin: 0;
}
.container {
    height: 100%;
    width: 100%;
    background-color: red;
    text-align: center; /* optional */
}
.container img {
    vertical-align: top;
}
.portrait img {
    width: 100%;
}

.landscape img {
    height: 100%;
}

Use the following jQuery method to pick the correct CSS rule depending on the aspect ratio of the view port:

function resizeImg() {
    var thisImg= $('.container');
    var refH = thisImg.height();
    var refW = thisImg.width();
    var refRatio = refW/refH;

    var imgH = thisImg.children("img").height();
    var imgW = thisImg.children("img").width();

    if ( (imgW/imgH) > refRatio ) { 
        thisImg.addClass("portrait");
        thisImg.removeClass("landscape");
    } else {
        thisImg.addClass("landscape");
        thisImg.removeClass("portrait");
    }
}

$(document).ready(resizeImg())

$(window).resize(function(){
    resizeImg();
});

Demo fiddle: http://jsfiddle.net/audetwebdesign/y2L3Q/

This may not be the entire answer but it may be a place to start.

Reference
I worked on a related problem earlier, which may be of interest:
Make image fill div completely without stretching

Fit image to parent div's size

1 Answers1

jQuery Solution - Proof of Concept

Linked

Related