我有一个 5000x3700 图像，我正在使用 overflow:hidden 属性让它填充视口(viewport)而不导致任何滚动条。
<!DOCTYPE html>
<head>
<title> Animations </title>
<style>
*{
margin: 0;
padding: 0;
}
.jumbotron1{
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<img src="books.jpeg" class="jumbotron1">
</body>
</html>
但是上面的代码对我没有任何作用。它只显示带有滚动条的全尺寸图像。如果我删除溢出属性并为 * 元素添加宽度和高度，我的问题就解决了。
*{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
我的问题是，为什么溢出不起作用，为什么上面添加的高度和宽度起作用？
最佳答案
为什么溢出不起作用？
The above code doesn't do anything for me however. It just displays the full sized image with scroll bars . . . my question is, why is overflow not working
TL;DR 版本:overflow:hidden不是导致滚动条的原因，您的图像是全尺寸的，无法适应浏览器窗口，因此浏览器正在添加滚动条。
实际上，overflow完全按预期工作。首先，理解这一点非常重要，设置 overflow:hidden当内容大于元素的 block formatting context 时，将导致内容被隐藏.基本上，如果一个元素在一定尺寸的盒子内，overflow:hidden将导致任何大于盒子的东西被剪裁(或从 View 中隐藏)
您的初始代码只是将图像以全尺寸放置在页面上。你没有任何限制它的大小......
.jumbotron1 {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
}
它的父元素(body 和 html)也没有大小限制。您的图像所在的“框”等于其原始大小，因此没有比要裁剪的框“更大”的东西 - 因此您可能期望没有滚动条。事实上，overflow:hidden实际上不是导致滚动条。
实际上，您的图像正在被视口(viewport)(即浏览器窗口)裁剪，这就是您看到滚动条的原因。设置overflow:hidden不会将图像调整为视口(viewport)的大小。如果您有一个巨大的显示器并且您的视口(viewport)是 5000 像素宽，那么您将看不到滚动条。
为什么添加高度和宽度有效？
TL;DR 版本:您已将每个元素设置为与视口(viewport)相同的尺寸，因此您的图像和浏览器窗口现在大小相同 - 不需要滚动条。
您的附加代码将每个元素的高度和宽度设置为根元素(html 元素)的完整高度和宽度。由于您没有为 html 设置尺寸元素，它采用视口(viewport)的高度和宽度。
* {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
实际上，您将图像的尺寸设置为视口(viewport)的相同尺寸。由于图像和浏览器窗口大小相同，当然不会有滚动条。
我不建议使用它来解决您的问题。使用 *会将您的样式应用于文档中的每个元素。这意味着所有 block 级元素也将具有 height:100%和 width:100% , 所以即使是 <p>元素会覆盖整个屏幕。
另外，您的形象将不成比例。高度和宽度都将基于浏览器窗口大小，最终你会得到疯狂的图像比例，就像你在这里看到的:https://codepen.io/noahjwhitmore/pen/rpZwyM
您的解决方案 - vh 单位
使用 vh 设置图像高度单位将解决您的问题。每个vh单位代表视口(viewport)高度的 1%。因此，将“height:100vh”应用于您的图像应该可以解决问题。如果将图像放在元素的背景中，甚至可以使其居中。
.jumbotron1 {
background-image: url('books.jpeg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
/* You may wish to un-comment the next
property if you want the image to be
the exact dimensions of the viewport */
/* width: 100vw */
}
关于html - 尝试使用溢出 : hidden 让我的图像填充视口(viewport)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48274618/