使 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 内,因此列高不匹配。当您调整窗口大小时,列从正方形变为矩形。所以也许我必须在断点处交换图像。
您希望您的图像成为其直接父级 (<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>
标记中的使用,这样下面的内容就不会向上浮动并进入这个批次。 您可能还想在其他div
s 中使用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-responsive
s)。我确实说过我喜欢你的 JS 方法;但是现在您已将其删除:(此外,当您在 DOM 中仍然可见图像(而不是 display: none
)时,图像本身仍会出现在 div 的背景图像的顶部以上是关于使 div 内的图像像背景图像封面一样的主要内容,如果未能解决你的问题,请参考以下文章