我试图为我的网站制作一个＆＃34;介绍＆＃34; -section，它应占用当前大约80％（当加载页面时）视口高度并包含两个图像：一个在该部分的左侧和右侧。在这两个图像下方，应显示向下箭头，使客户端向下滚动以查看下一部分。
事情是，如果我将我的介绍div设置为height: 80%并设置图像width:100%以使它们响应，它们会溢出设置为80％高度的介绍div。
我制作了一个示例codepen来说明我的问题。
我将不透明度设置为0.5，这样你就可以看到我的介绍div在哪里了。
有没有办法让图片适合他们的div，我不必将overflow:hidden;放在我的介绍div上？
提前致谢。
答案 0 :(得分：3)
对于这种情况，您可能希望在div上使用背景图像而不是普通的img标记：
<div style="background-image:url(myimage.jpg)"></div>
在这些div上，设置以下css：
background-size:cover;
如果您在jsfiddle.net或类似网站上开始演示，我可以提供更多细节。
答案 1 :(得分：0)
您可以使用视口高度单位：height: 80vh;但将其与width: 100%;一起使用可能会破坏图像宽高比;正如kthornbloom之前所说，你可以使用背景图像来填充整个父元素。
答案 2 :(得分：0)
背景图像是要走的路。请注意，您必须添加高度：100％; 到#intro div以继承父元素的高度