Divide page horizontally with divs having img inside

Question

I have two divs, inside theres a image that is high resolution (to fit all screens). I want the images to resize according to the divs, and the divs should be 100% width and 50% height of the screen size. I want to use CSS for this, does anyone have any ideas?

Here is a jsfiddle that has the code http://jsfiddle.net/rhUDa/

|----------------------|
|        TOP DIV       |
|----------------------|
|       BOT DIV        |
|______________________|

<div id="top">
 <img></img>
</div>
<div id="bot">
 <img></img>
</div>

Answer 1

Using background images will allow you to easily centre the images and maintain aspect ratio:

html, body {
    height: 100%;
}

#top, #bot {
    height: 50%;
}

#top {
    background: url(/your/image/path.jpg) center;
    background-size: cover;
}

#bot {
    background: url(/your/image/path.jpg) center;
    background-size: cover;
}

Working Demo