在div中创建一个像背景图像封面的图像

Question

尝试在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>

Answer 1

我刚刚玩了一下你的 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;
}

这里的秘密是，原始图像仍然存在（设置opacity为0），因此它仍然“存在”，并给出div一定的高度。请不要像我一样使用内联样式；将它们移动到 CSS 类 - 我刚刚为示例完成了它！

它对我来说效果很好 - 但是你需要决定背景图像 div （或任何你想称呼它的东西）何时将其自身定位在其他内容之上。

clearfix请注意标签中类的使用<i>，这样下面的内容就不会漂浮到这部分内容中。您可能还想在其他类中使用- 非常有用的类！:)clearfixdiv

有任何问题尽管问。

希望这可以帮助！:)