html - 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:

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

Answer 1

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