我正在尝试使用 <img>标记在另一个 div 上显示照片，作为某种覆盖。但是，图像不会缩放到其父 div(页面主体)内。相反，它溢出了 body 。当我设置 overflow: hidden;到正文，你不能滚动页面。我希望图像是全高的并适合 body (不扩大 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.
最佳答案
在您使用 meta 作为高度之前，以 % 表示的高度将不起作用， ok请在overflow:none处使用overflow:hidden
关于html - 尽管最大高度设置为 100%，但图像变得比父级大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38934133/