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

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

1 个答案: