使响应式图像以百分比高度填充 div
Make responsive images fill div with a percent height
我正在尝试为我的网站制作一个 "intro" 部分，该部分应占据当前（加载页面时）视口高度的 80% 左右，并包含两张图片：一张在左边和一个在该部分的右侧。在这两张图片下方，应显示一个向下箭头，诱使客户向下滚动到下一部分。
问题是，如果我将简介 div 设置为 height: 80% 并设置图像 width:100% 使其响应，它们会溢出设置的简介 div到 80% 高度。
我做了一个示例 codepen 来说明我的问题。
我将不透明度设置为 0.5，这样您就可以看到我的介绍 div 在哪里。
有没有什么方法可以让图像适合他们的 div，这样我就不必在我的介绍 div 上加上 overflow:hidden;？
提前致谢。
您可以这样使用视口高度单位：height: 80vh; 但将它与 width: 100%; 一起使用可能会破坏您的图像纵横比；正如 kthornbloom 刚才所说，您可以使用背景图像来填充整个父元素。
对于这种情况，您可能希望在 div 上使用背景图片而不是普通的 img 标签：
<div style="background-image:url(myimage.jpg)"></div>
在这些 div 上，设置以下 css:
background-size:cover;
如果您有在 jsfiddle.net 或类似平台上启动的演示，我可以提供更多细节方面的帮助。
背景图片是正确的选择。请注意，您必须添加 height: 100%;
#intro div 以便继承父元素的高度
我正在尝试为我的网站制作一个 "intro" 部分，该部分应占据当前（加载页面时）视口高度的 80% 左右，并包含两张图片：一张在左边和一个在该部分的右侧。在这两张图片下方，应显示一个向下箭头，诱使客户向下滚动到下一部分。
问题是，如果我将简介 div 设置为 height: 80% 并设置图像 width:100% 使其响应，它们会溢出设置的简介 div到 80% 高度。
我做了一个示例 codepen 来说明我的问题。
我将不透明度设置为 0.5，这样您就可以看到我的介绍 div 在哪里。
有没有什么方法可以让图像适合他们的 div，这样我就不必在我的介绍 div 上加上 overflow:hidden;？
提前致谢。
您可以这样使用视口高度单位：height: 80vh; 但将它与 width: 100%; 一起使用可能会破坏您的图像纵横比；正如 kthornbloom 刚才所说，您可以使用背景图像来填充整个父元素。
对于这种情况，您可能希望在 div 上使用背景图片而不是普通的 img 标签：
<div style="background-image:url(myimage.jpg)"></div>
在这些 div 上，设置以下 css:
background-size:cover;
如果您有在 jsfiddle.net 或类似平台上启动的演示，我可以提供更多细节方面的帮助。
背景图片是正确的选择。请注意，您必须添加 height: 100%; #intro div 以便继承父元素的高度