Question

我的bootstrap html中的响应式图像没有显示：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <img class="myimg img-responsive"/>
        </div>
    </div>
</div>

CSS

.myimg {
    background-image: url("http://images.wikia.com/worldlanguages/images/6/63/Wikipedia-logo.png");
    display:block;
    height:100%;
    width:100%;
}

jsfiddle demo

<img src="...">可以使用，但我需要在css中定义图像。

This similar thread建议使用<div>并删除url()中的引号，但这没有帮助。

为什么不显示？

Answer 1

您需要为所有父母设置身高，您需要html, body { height: 100%; } .container { height: 100%; } .row, .col-sm-12 { height: 100%; } .myimg { background-image: url("//lorempixel.com/200/200"); background-size: cover; display: block; height:100%; width:100%; } .myimg2 { background-image: url("//lorempixel.com/200/200"); background-size: cover; display: block; height:100%; width:100%; } .myimg3 { background-image: url("//lorempixel.com/200/200"); background-size: cover; display: block; height:100%; width:100%; }

（Demo）

html, body {
    height: 100%;
}
.container {
    height: 100%;
}
.row,
.col-sm-12 {
    height: 100%;
}
.myimg, .myimg2, .myimg3 {
    background-size: cover;
    display: block;
    height:100%;
    width:100%;
}
@media (max-width: 500px) {
  .myimg {
      background-image: url("//lorempixel.com/500/500/cats");
  }
  .myimg2 {
      background-image: url("//lorempixel.com/500/500/business");
  }
  .myimg3 {
      background-image: url("//lorempixel.com/500/500/transportation");
  }
}
@media (max-width: 750px) {
  .myimg, .myimg2, .myimg3 {
  .myimg {
      background-image: url("//lorempixel.com/750/750/cats");
  }
  .myimg2 {
      background-image: url("//lorempixel.com/750/750/business");
  }
  .myimg3 {
      background-image: url("//lorempixel.com/750/750/transportation");
  }
  }
}
@media (max-width: 1000px) {
  .myimg {
      background-image: url("//lorempixel.com/1000/1000/cats");
  }
  .myimg2 {
      background-image: url("//lorempixel.com/1000/1000/business");
  }
  .myimg3 {
      background-image: url("//lorempixel.com/1000/1000/transportation");
  }
}

如果您想要响应性地更改背景图像，您可以这样做。

（Demo）

 On Error Goto catch_err
 ...open text file here
 On Error Goto 0

 catch_err:
   Msgbox err.description

Answer 2

您无法通过css设置图片src。你必须把img变成一个块并设置适当的宽度/高度来显示背景。然而，这对我来说听起来并不奇怪。你应该在div上做到这一点：

{{1}}

background-image css没有在img标签中显示

2 个答案: