jquery - 使 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;
}

这里的 secret 是原始图像仍然存在(其 opacity 设置为 0 )，所以它仍然“存在”，并给出 div一些高度。 请不要像我一样使用行内样式；将它们移动到 CSS 类 - 我刚刚为示例完成了它!

它对我来说很好用——但是您需要决定背景图像 div(或您喜欢的任何名称)何时将其自身定位在其他内容之上。

注意 clearfix 的使用<i> 中的类标签，这样下面的内容就不会浮起来并进入这个地段。 您可能还想使用 clearfix在其他div s - 非常有用的类(class)! :)

有任何问题，尽管问。

希望对您有所帮助! :)