使响应式图像以一定的高度填充div
提问于 2016-09-21 19:12:47
我正在尝试为我的网站做一个“介绍”-section，它应该占当前(页面加载时)视口高度的80%左右，并包含两个图像:一个在部分的左侧，一个在部分的右侧。在这两个图像下面，应该显示一个向下箭头，引导客户端向下滚动到下一部分。
问题是，如果我将介绍div设置为height: 80%，并将图像高度设置为width:100%以使其响应，它们会溢出设置为80%高度的介绍div。
我制作了一个示例codepen来说明我的问题。
我将不透明度设置为0.5，这样您就可以看到我的介绍div的位置。
有没有办法让图片适合他们的div，这样我就不用把overflow:hidden;放在我的介绍div上了？
提前谢谢。
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-09-21 19:27:51
在这种情况下，您可能希望在div上使用背景图像，而不是普通的img标记：
<div style="background-image:url(myimage.jpg)"></div>在这些div上，设置以下css：
background-size:cover;如果你在jsfiddle.net或类似的平台上开始了演示，我可以提供更多的细节。
Stack Overflow用户
发布于 2016-09-21 19:25:23
你可以像这样使用视窗高度单位：height: 80vh;，但是在width: 100%;中使用它可能会破坏图像的纵横比；正如kthornbloom之前所说的，你可以使用背景图像来填充整个父元素。
Stack Overflow用户
发布于 2016-09-21 19:37:16
背景-图像是最好的选择。请注意，您必须将height: 100%；添加到#intro div，以便继承父元素的高度
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39624759
复制
腾讯云开发者
