水平划分页面与内嵌img的div

Question

我有两个div，里面有一个高分辨率的图像（适合所有​​屏幕）。我希望图像根据div调整大小，div应该是屏幕大小的100％宽度和50％高度。我想使用CSS，有没有人有任何想法？

这是一个包含代码http://jsfiddle.net/rhUDa/

的jsfiddle

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

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

Answer 1

使用背景图像可以轻松居中图像并保持纵横比：

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