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>类的使用，以便下面的内容不会浮动并进入此批次。 您可能还想在其他clearfix中使用div - 非常有用的课程！：）

有任何问题，请问。

希望这有帮助！：）

Answer 2

我将它作为背景图片样式添加到它的父div中。

＆＃13;

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

＆＃13;

<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>

＆＃13;

在div中创建图像就像背景图像封面

2 个答案: