html - 响应不同屏幕尺寸的矩形图像

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 设置元素的宽度和高度。