Question

我使用bootstrap开发网站。我的网站内容 - 3个固定列，包括左侧菜单，中心内容，右侧菜单和顶部横幅。我想在中心内容中显示完整的背景图像，这只是一个空白的div标签。我的问题是背景图像没有完全覆盖内容，只显示了一半的图像。我在html和css中有以下代码：

的index.html

<div class="img-responsive content_area"></div>

的style.css

.content_area {
    display:inline-block;
    position:absolute;
    width: 100%;
    height: 100%;
    background: url(../images/bg.png) no-repeat top left;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 1

这是实现此目的的一种方法。

http://jsfiddle.net/3efxuvzv/4/

CSS

.content_area {
    width:100%;
    padding-top: 74.6691871456%;
    background: url(http://www.postfree108.com/images_postfree/Direct-marketing-12890.jpg) no-repeat top left;
    background-size: cover;
}
.content {
    margin-top: -74.6691871456%;
}

HTML

<div class="content_area">
    <div class="content">
        <!-- put your content here -->
    </div>
</div>

基本上，我将实际的html内容放在另一个包装器中，并使用了填充和边距的百分比（即使顶部/底部）由元素的宽度计算的事实，以设置纵横比的填充顶部您的图像（74.6691871456% = 395/529 - 背景图像的尺寸），然后在内容元素上使用负数相同的边距偏移填充。实际上，这会根据您所需的宽高比创建最小高度的效果。

在bootstrap中显示div标签中的完整背景图像

1 个答案: