我正在尝试为我的网站制作一个“前奏”部分，该部分应占用当前（加载页面时）的大约80％的视口高度并包含两个图像：一个在该部分的左侧和一个右侧。在这两张图片下面，应该显示一个向下箭头，戏弄客户向下滚动下一部分。使响应图像填充百分比高度的div
事情是，如果我将我的介绍div设置为height: 80%并将图片width:100%设置为使其响应，则会溢出设置为80％高度的介质div。
我做了一个样本codepen来说明我的问题。
我将不透明度设置为0.5，以便您可以看到我的介绍div的位置。
有什么办法让图像适合他们的div，我不需要在我的介绍div上放overflow:hidden;？
在此先感谢。
对于这种情况，你可能会想在申报单，而不是正常的img标签使用背景图片：
<div style="background-image:url(myimage.jpg)"></div>
在这些div，设置以下的css：
background-size:cover;
如果您有一个在jsfiddle.net或类似的开始演示，我可以帮助更多的细节。
谢谢！ :-)我在这里创建了这个jsfiddle：https：//jsfiddle.net/yw7yqvd3/将它设置为background-size：cover使得它不能填充容器的宽度，但高度是正确的。我想我从这里的浏览器问得太多了;-) –
@BoMortensen我不明白你总是希望100％的宽度和100％的高度？ – DaniP
DaniP：我想我只是想让图像尽可能在div中居中。不知道这是可能的。我会坚持使用@ kthornbloom的解决方案来使用背景大小：封面。使用background-image，我不必在div中使用'position：absolute;'在文本，按钮等元素上:-) –
您可以使用视口高度单位，例如：height: 80vh;但与width: 100%;一起使用它可能会破坏您的图像宽高比;正如之前kthornbloom所说的，你可以使用背景图像填充整个父元素。
背景图像是要走的路。请注意，您必须添加高度：100％; to #intro div以继承父元素的高度
嗯在某些时候img将需要溢出容器或宽度或高度，如果你想覆盖整个div而不扭曲img – DaniP