Question

这是我当前的html（实际上是jade）设置：

.format-properly
    .guide-bg-warrior.img-responsive

哪些可以翻译成：

<div class="format-properly">
    <div class="guide-bg-warrior img-responsive>
    </div>
</div>

img-responsive类来自bootstrap，这是我的css的另一部分：

.format-properly {
    width: 70%;
    margin: 0 auto;
    background-color: white;
    border-radius: .0em;
}

.guide-bg-warrior{
    background-image:url('images/hero_images/warriorbg.png');
}

因此图像正在加载，但它没有缩放到format-properly divs宽度。你们对于为什么会出现这种情况有什么建议吗？

Answer 1

您可以尝试添加

.guide-bg-warrior{
    background-image:url('images/hero_images/warriorbg.png');
    background-size: 100% auto;
}

或者，如果你真的希望你的图像涵盖所有div：

background-size: cover;

Answer 2

.guide-bg-warrior{
background-image:url('images/hero_images/warriorbg.png');
background-size:100% auto;

}

或者你想覆盖所有div然后使用

.guide-bg-warrior{
    background-image:url('images/hero_images/warriorbg.png');
    background-size:cover;
}

Answer 3

如果您想使用img-responsive课程，则必须在img元素上https://jsfiddle.net/2Lzo9vfc/171/

<强> HTML

<div class="format-properly">
   <div class="guide-bg-warrior">
      <img src="http://placehold.it/1000x500" alt="" class="img-responsive">
   </div>
</div>

<强> CSS

.format-properly {
    width: 70%;
    margin: 0 auto;
    background-color: white;
    border-radius: .0em;
}

使图像宽度响应父div

3 个答案: