Make an image placed in a div 100% width and 100% height of browser

Question

Hi simple question really but can't figure it out.

I would like to fill the browser with an image so that whatever size the user makes there browser, my image will fill the content.

I also need the image to stay center so that if the user makes he browser smaller, the image will stay centered and will lose the edges first, hope his makes sense.

The reason behind this, I intend to put a plugin in it's place called layer slider.

Heres my code

<div id="div1">
<img src="images/gifts.jpg" height"100%" width"100%">
</div>

EDIT 1: Sorry forgot to add that i need to keep the image in proportion so that if the user decreases the width of the browser, the image will stay centred but will start to lose the edges, if the user then decreases the height, the image will shrink so that what ever the height or width of the browser it will always stay in proportion.

EDIT 2: here's a link of what i want, but i need the image to be in the div.

Thanks

Answer 1

Apply the height and width to the divider itself.

#div1 { height:100%; width:100%; }

If the height doesn't work on the divider, you'll need to change your page's html and body to also have 100% height. It's also a good idea to clear padding and margins.

html, body { height:100%; padding:0; margin:0; }

JSFiddle .

If you also want that divider to appear on top of other content behind, you'll need to set it's z-index greater than the behind content and position the divider:

body { position:relative; z-index:1; }
#div1 { position:fixed; z-index:1000; }

Edit:

To keep the image in proportion:

/* If the browser doesn't support media queries */
div#div1 img { height:100%; width:100%; }

/* If the screen is portrait */
@media screen and (orientation:portrait) { 
    div#div1 img { height:auto; width:100%; }
}

/* If the screen is landscape */
@media screen and (orientation:landscape) {
    div#div1 img { height:100%; width:auto; }
}

Updated JSFiddle .

Answer 2

add the following CSS

#div1 img {
    position : absolute;
    height:100%;
    width:100%
}

Answer 3

Try this:

If you want to set the height of a div or any element, you should set the height of body and html to 100%.

body,html{
  height:100%;
}

#div1{
  height:100%
}

Answer 4

add your image

 <img src="images/bg.jpg" id="bg" alt="">

add this css

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

use this jquery

$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});