Question

我正在尝试使用Bootstrap中的响应式图像功能。但是，当我尝试使用以下代码显示横幅图像时，横幅将不会显示：

<div class="jumbotron">
    <div class="img hero img-responsive"></div>
</div> 

.hero {
  background: url("../images/banner500.jpg") no-repeat;
  vertical-align: bottom;
  width: 100%;
  height: 500px;      
  left: 0;
  top: 0;
  z-index: 1;
}

我也在使用AngularJS和SASS。

有关如何解决此问题的任何建议吗？

Answer 1

.img-responsive有height: auto作为CSS属性。如果您在自己的CSS之后加载Bootstrap，则Bootstrap会覆盖您的.hero高度。您可以先加载Bootstrap或将CSS选择器更改为.jumbotron .hero来解决此问题。

这里应该注意，.img-responsive无论如何都不会为你做任何事情。您可以直接在图像上使用此类以使其响应。您想要的是您的背景图像是否适合响应，这意味着您应该设置background-size: cover (or contain)并根据需要调整div的高度，可能使用height: 0; padding-bottom: X%，其中X％是图像的高度百分比宽度。

Answer 2

你的大多数CSS没有效果，有些甚至有错误。我仍然不确定我们是否可以解决您的问题，因为喜欢评论的人我猜您的问题与我们看不到的代码有关，因为您应该至少看到一些东西......

然而，你应该更改一些部分以及进一步解决问题/ CSSing的一些提示：

正确使用.img-responsive
http://getbootstrap.com/css/#images-responsive .img-responsive中显示的内容应仅用于<img> - 标记。它的作用（height: auto;）不适用于带有背景图片的<div>。现在，当您使用.img-responsive时，不应手动设置height，否则它将无效，因为它的作用主要是将高度设置为auto ...

正确使用职位和z-index
left，right和z-index只应与position: relative或position: absolute结合使用。因此，在您的情况下，它们应该没有效果，但为了便于阅读，您应该删除它们。

正确使用vertical-alignment
vertical-alignment仅对内联元素有影响，在您的情况下我没有看到...

正确使用width
您在块元素上使用width: 100%，并且块元素应始终具有其容器的100％宽度。因此，在您的情况下，此属性不再是必需的（除非有很多代码和规则影响示例）。
知道这也检查父元素的有效宽度。

这意味着你发布的内容中只有两行你的CSS实际上有效，当你什么也看不见时，你的代码之外也会出现另一个问题。

使用Bootstrap时，横幅图像不显示响应式图像

2 个答案: