在不同屏幕尺寸下響應的矩形圖像

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