分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 在div中创建一个像背景图像封面的图像，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

解决方法

我刚刚玩过你的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;
}