在不同屏幕尺寸下响应的矩形图像

Question

我有一张尺寸为 1050x700 的图片。我会把它放在桌面上时全屏显示。这个想法是将它放在桌面版本的黑条下，这样图像几乎保持不变。 这是jsfiddle示例http://jsfiddle.net/qLdp4czn/1/

在手机中没有问题，因为它适合设备显示，所以它应该恢复正常而不将其放在栏下

代码如下：

<div class="container-fluid top-bar">
    <div class="row-top">
        <div id="central-block" class="text-center">
            <p>Title</p>
        </div>
    </div>
</div>
<div class="img-background">
    <img src="http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg" alt="animal" class="img-responsive">
</div>

Answer 1

将图像作为背景图像，并删除 img 元素：

.img-background {
 background-image:url(http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg);
 background-repeat:no-repeat;
 background-size:100% auto;
 position:relative;
 width:100%;
 height:100%;
}

您可能需要根据其他 CSS 设置元素的宽度和高度。