尽管max-height设置为100%，但图像会变得比父图像大
我正在尝试使用<img>标签在另一个div上显示一张照片，作为某种覆盖。但是，图像不会缩放到它的父div (即页面的主体)的内部。相反，它会溢出身体。当我将overflow: hidden;设置为body时，您不能在页面上滚动。我希望图像是全高的，并适合身体(而不是放大身体)。
这基本上就是页面的结构：
<html>
<body>
<div class="imgContainer">
<img class="actualImage" />
</div>
<div class="restOfBody">
</div>
</body>
</html>和css：
body {
background-image: url(*some background photo*)
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 0;
margin: 0;
max-height: 100%;
}
.imgContainer {
z-index: 2;
position: absolute;
top: 0;
left: 0;
max-height: inherit;
}
.actualImage {
max-height: 100%;
}这基本上就是现在正在发生的事情：The image that is drawn over the text right now, pushes the page down so far, that it actually exceeds the body of the html.
回答 3
Stack Overflow用户
发布于 2016-08-13 23:25:13
在你使用meta作为高度之前，%中的高度将不起作用，ok，请使用overflow:隐藏在overflow:none的位置
Stack Overflow用户
发布于 2016-08-13 23:32:57
使您的图像作为背景图像。我觉得这样会更好。
Stack Overflow用户
发布于 2016-08-13 23:33:20
在您的身体中添加一个容器，如下所示：
<body>
<div class="container">
<div class="imgContainer">
<img class="actualImage" src="banner.jpg">
</div>
</div>
</body>并在css中执行此操作
.container {
width: 200px;/*sample width*/
height: 200px;/*sample height*/
overflow: hidden;
}
.imgContainer {
position: relative;
top: 0;
left: 0;
max-height: inherit;
}.container负责设置边界，并通过使用overflow: hidden防止.container中的内容重叠。而在.imgContainer的情况下，确保位置是相对于容器的，绝对将自己拉出流，这在您的情况下是不安全的。
https://stackoverflow.com/questions/38934133
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号