Html 将页面水平分割，中间有img

我有两个div，里面有一个高分辨率的图像（适合所有屏幕）。我想根据div调整图像大小，div应该是屏幕大小的100%宽度和50%高度。我想用CSS来做这个，有人有什么想法吗

下面是一个包含代码的JSFIDLE

|----------------------|
|顶球|
|----------------------|
|机器人部|
|______________________|

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

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;
}

---

工作正常！非常感谢你！！

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;
}