让一个div中的图片像背景图片一样铺满整个div

Question

让一个div中的图片像背景图片一样铺满整个div

jquerycsstwitter-bootstrapresponsive-design

5

尝试让内联图像在div内自动裁剪以模拟背景图像。我尝试使用绝对位置并设置大于100%的大小，但是当你调整大小时，它只适用于高度一次，然后在宽度上就会出问题。我假设正方形形状没有什么帮助。您有任何解决此结果的建议吗？

JavaScript是使其工作的最佳方式吗？

body {
  background: #000;
}
.container {
  background: #ccc;
}
.row {
  border: 1px solid #fff;
}
.col-md-6 {
  border: 1px solid red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">

<div class="container">

  <div class="row">
    <div class="col-md-6">
      <img src="http://dummyimage.com/600x500/500/fff" class="img-responsive" />
    </div>
    <!-- /.col-md-6 -->
    <div class="col-md-6">
      <h2>Heading</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis officia animi consectetur obcaecati cum harum aliquam qui nisi aliquid sint. Nobis voluptas sequi voluptatem soluta ex sed nisi, sapiente dicta!</p>
    </div>
    <!-- /.col-md-6 -->
  </div>
  <!-- /.row -->

</div>

- JacobLett

2

你能否只使用CSS中的background-image吗？ - Dryden Long

我同意@DrydenLong的观点 - 此外，还有一些可用的background-size选项：我倾向于选择background-size: cover，然后是background-position: center；你可以按照自己的方式来做 :) - Geoff James

你想让你的图片成为其直接父元素(<div class="col-md-6">)的背景吗？这可能有点棘手，因为Bootstrap的col类使用浮动。 - Geoff James

1

https://dev59.com/tWIj5IYBdhLWcg3w_5vl - DaniP

好嗓子@DaniP - 我会收藏那个链接以便日后参考！ :) - Geoff James

显示剩余2条评论

2个回答

0

我将其作为背景图像样式添加到其父div中。

body {
  background: #000;
}
.container {
  background: #ccc;
}
.row {
  border: 1px solid #fff;
}
.col-md-6 {
  border: 1px solid red;
}

.image-holder {
  background: center center;
  background-size: cover;
}

.img-responsive {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">

<div class="container">

  <div class="row">
    <div class="col-md-6 image-holder" style="background-image:url(http://dummyimage.com/600x500/500/fff);">
      <img src="http://dummyimage.com/600x500/500/fff" class="img-responsive" />
    </div>
    <!-- /.col-md-6 -->
    <div class="col-md-6">
      <h2>Heading</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis officia animi consectetur obcaecati cum harum aliquam qui nisi aliquid sint. Nobis voluptas sequi voluptatem soluta ex sed nisi, sapiente dicta!</p>
    </div>
    <!-- /.col-md-6 -->
  </div>
  <!-- /.row -->

</div>

- Stubbies

嗯...我喜欢你用JS复制url属性的方法。但是我担心image和image-holder类都有固定高度为350px - 将图像设置为响应式与此代码完全相反，这个想法是不可行的。 - Geoff James

还有（我在这里有点龟毛 - 请原谅），当尺寸为“cover”时，您的“no-repeat”声明是多余的，因为它永远不会小于容器（它正在“覆盖”它）。 - Geoff James

删除了js部分和image类。现在没有固定的高度。 - Stubbies

好的，很公平。但是现在你已经将img-responsive类的display: none，这个div将完全没有高度（如果它在样式表中设置并在整个站点中使用，则会破坏所有其他img-responsive）。而且我确实说过我喜欢你的JS方法;但现在你把它删除了:(另外，当您仍然在DOM中显示图像（而不是display: none）时，图像本身仍将出现在div的背景图像上方。 - Geoff James

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Geoff James · Accepted Answer

我刚刚试玩了你的CodePen代码。

这可能有所帮助/是你想要的内容:

HTML：

<div class="container">
   <div class="row">
      <div class="col-md-6 background-cover-image">
          <img src="http://dummyimage.com/600x500/500/fff" class="img-responsive" style="opacity: 0;" />
      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-6">
      <h2>Heading</h2>

      <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Officiis officia animi consectetur obcaecati cum harum aliquam qui nisi aliquid sint.
          Nobis voluptas sequi voluptatem soluta ex sed nisi, sapiente dicta!</p>
      </div>
      <!-- Apply clearfix to stop other content floating up over -->
      <i class="clearfix" aria-hidden="true"></i>
      <!-- /.col-md-6 -->
   </div>
   <!-- /.row -->
</div>

CSS:

body {background:#000;}
.container {background:#ccc;}
.row {border:1px solid #fff;}
.col-md-6 {border:1px solid red;} // All of these are as before :)

.background-cover-image {
   background-image: url('http://dummyimage.com/600x500/500/fff');
   background-size: cover;
   background-position: center;
}

这里的秘诀是原始图像仍然存在(其透明度设置为0)，因此它仍然存在，并给div一些高度。请不要使用内联样式，就像我所做的那样; 将它们移到CSS类中-我只是为了举例而已！对我来说很好用-但是您需要决定背景图像div(或您想要称呼的任何内容)何时定位在其他内容的上方。请注意，在标记中使用clearfix类，以使下面的内容不会浮动到其中。您可能还想在其他
中使用clearfix-非常有用的类！ :)如果有任何问题，请随时问。希望这会有所帮助！ :)