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

Posted

技术标签:

【中文标题】使 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 内,因此列高不匹配。当您调整窗口大小时,列从正方形变为矩形。所以也许我必须在断点处交换图像。 您希望您的图像成为其直接父级 (&lt;div class="col-md-6"&gt;) 的背景吗?这可能很棘手,因为引导程序 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 类在&lt;i&gt; 标记中的使用,这样下面的内容就不会向上浮动并进入这个批次。 您可能还想在其他divs 中使用clearfix - 非常有用的类! :)

有任何问题,尽管问。

希望这会有所帮助! :)

【讨论】:

+1 超级聪明的改变不透明度。我正在研究一些 JS 诡计,但这对我来说似乎是一个更好的解决方案...... 非常感谢 Geoff James。这看起来会起作用,我真的很喜欢你使用内联图像来设置高度。我已经看到了与 owl carousel 类似的技术,我认为透明占位符的 cycle2 插件。必须做同样类型的事情。我要做的唯一补充是通过 javascript 添加背景 img url 以使其对 CMS 更友好。 快乐都是我的 :) JS 修改背景图像以实现可重用代码的好注释。当我有机会时,我会添加一些示例 JS(已经很晚了,我正在使用移动应用程序)——仅供未来的人使用。 顺便说一句 - 一旦你设置了父级的背景,只改变你的JS中原始&lt;img&gt;标签的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 属性的方法。恐怕我不喜欢 imageimage-holder 类的固定高度为 350px - 将图像设置为 responsive 的想法与此代码完全适得其反 另外(我在这里很迂腐-对不起),当大小为cover 时,您的no-repeat 声明是多余的,因为它永远不会小于容器(它是@987654329 @ing) 删除了 js 部分和 image 类。现在没有固定高度。 好吧。但是现在你已经有了display: none img-responsive 类,这个 div 将完全没有高度(另外,如果它设置在样式表中并在站点范围内使用,这会破坏所有其他 img-responsives)。我确实说过我喜欢你的 JS 方法;但是现在您已将其删除:(此外,当您在 DOM 中仍然可见图像(而不是 display: none)时,图像本身仍会出现在 div 的背景图像的顶部

以上是关于使 div 内的图像像背景图像封面一样的主要内容,如果未能解决你的问题,请参考以下文章

DIV中的背景图像透明度[重复]

如何修复div内的背景图像

Div 内的 Twitter Bootstrap 响应式背景图像

IE11 不会背景大小:封面

使背景图像适合 div

使用 CSS 使两个背景图像与 div 一起响应