使 div 内的图像像背景图像封面一样

Posted 2023-03-06

【中文标题】使 div 内的图像像背景图像封面一样

【英文标题】：Make an image inside a div act like a background image cover

【发布时间】：2016-10-26 08:26:30

【问题描述】：

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

【问题讨论】：

你可以在 CSS 中使用 background-image 吗？

我同意@DrydenLong - 另外，有几个background-size 选项可供使用：我倾向于选择background-size: cover，然后是background-position: center；你怎么做取决于你:)

我试过了，但由于图像位于浮动 div 内，因此列高不匹配。当您调整窗口大小时，列从正方形变为矩形。所以也许我必须在断点处交换图像。

您希望您的图像成为其直接父级 (<div class="col-md-6">) 的背景吗？这可能很棘手，因为引导程序 col 类使用 float

***.com/questions/19695784/…

【参考方案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> 标记中的使用，这样下面的内容就不会向上浮动并进入这个批次。 您可能还想在其他divs 中使用clearfix - 非常有用的类！ :)

有任何问题，尽管问。

希望这会有所帮助！ :)

【讨论】：

+1 超级聪明的改变不透明度。我正在研究一些 JS 诡计，但这对我来说似乎是一个更好的解决方案......

非常感谢 Geoff James。这看起来会起作用，我真的很喜欢你使用内联图像来设置高度。我已经看到了与 owl carousel 类似的技术，我认为透明占位符的 cycle2 插件。必须做同样类型的事情。我要做的唯一补充是通过 javascript 添加背景 img url 以使其对 CMS 更友好。

快乐都是我的 :) JS 修改背景图像以实现可重用代码的好注释。当我有机会时，我会添加一些示例 JS（已经很晚了，我正在使用移动应用程序）——仅供未来的人使用。 顺便说一句 - 一旦你设置了父级的背景，只改变你的JS中原始<img>标签的opacity怎么样？这将意味着何时呈现页面；主要用于关闭脚本的浏览器，您的图像仍然可见（直到（如果）脚本运行，将其切换到背景图像等）。

这是一个与 CMS 配合良好的全 JavaScript 解决方案。如果用户禁用了 javascript，它将回退到图像。所以这是一个双赢。再次感谢杰夫。 codepen.io/JacobLett/pen/gMgOBj

我很高兴你明白我最后一个建议的意思——已经很晚了！你用你编写的 CodePen JS 拯救了我的小脑袋——真是漫长的一天！ 叹气。向你致敬@JacobLett - 在你的项目中向你致以最诚挚的问候:)

【参考方案2】：

我将它作为背景图像样式添加到它的父 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>

【讨论】：

嗯...我喜欢您使用 JS 复制 url 属性的方法。恐怕我不喜欢 image 和 image-holder 类的固定高度为 350px - 将图像设置为 responsive 的想法与此代码完全适得其反

另外（我在这里很迂腐-对不起），当大小为cover 时，您的no-repeat 声明是多余的，因为它永远不会小于容器（它是@987654329 @ing）

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

好吧。但是现在你已经有了display: none img-responsive 类，这个 div 将完全没有高度（另外，如果它设置在样式表中并在站点范围内使用，这会破坏所有其他 img-responsives）。我确实说过我喜欢你的 JS 方法；但是现在您已将其删除:(此外，当您在 DOM 中仍然可见图像（而不是 display: none）时，图像本身仍会出现在 div 的背景图像的顶部