尝试使用 overflow: hidden 让我的图像填充视口

Question

我有一个 5000x3700 图像，我正在使用 overflow:hidden 属性让它填充视口而不导致任何滚动条。

<!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%;
}

我的问题是，为什么溢出不起作用，为什么上面添加的高度和宽度起作用？

Answer 1

您好，如果您将图片设置为背景图片可以吗？

如果是，只需为正文添加背景并将高度设置为视口的 100%。

body {
    background-image("books.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
}

Answer 2

为什么溢出不起作用？

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 不会导致滚动条，您的图像是全尺寸的，无法适应浏览器 window，因此浏览器正在添加滚动条。

实际上，overflow 完全按照预期工作。首先，理解这一点非常重要，设置 overflow:hidden 会导致内容在大于元素的 block formatting context 时隐藏。基本上，如果一个元素在一个特定大小的盒子内，overflow:hidden 将导致任何大于盒子的东西被剪裁（或从视图中隐藏）

您的初始代码只是将图像以完整尺寸放置在页面上。你没有任何限制它的大小...

.jumbotron1 {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

其父元素（body 和 html）的大小也不受限制。您的图像所在的 'box' 等于其原始大小，因此 'larger' 除了要裁剪的框之外什么都没有 - 因此您可能希望没有滚动条。事实上，overflow:hidden 实际上是 而不是 导致滚动条。

真的，您的图像是被视口（意味着浏览器 window）裁剪，这就是您看到滚动条的原因。设置 overflow:hidden 不会将图像调整为视口的大小。如果你有一个巨大的显示器并且你的视口是 5000 像素宽，那么你将看不到滚动条。

为什么添加高度和宽度有效？

TL;DR 版本：您已将每个元素设置为与视口相同的尺寸，因此您的图像和浏览器 window 现在大小相同 - 不需要滚动条。

您的附加代码将每个元素的高度和宽度设置为根元素（html 元素）的完整高度和宽度。由于您没有为 html 元素设置任何尺寸，它采用视口的高度和宽度。

* {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

实际上，您将图像的尺寸设置为视口的相同尺寸。图片和浏览器window大小一样，当然不会有滚动条了

我不建议使用它来解决您的问题。使用 * 会将您的样式应用到文档中的每个元素。这意味着所有块级元素也将具有 height:100% 和 width:100%，因此即使是 <p> 元素也会覆盖整个屏幕。

此外，您的形象将不成比例。高度和宽度都将基于浏览器 window 大小，最终你会得到疯狂的图像比例，就像你在这里看到的：https://codepen.io/noahjwhitmore/pen/rpZwyM

您的解决方案 - vh 单位

使用 vh 单位设置图像高度将解决您的问题。每个 vh 单位代表视口高度的 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 */
}

尝试使用 overflow: hidden 让我的图像填充视口

Trying to get my image to fill the viewport using overflow: hidden

html

css

overflow

为什么溢出不起作用？

为什么添加高度和宽度有效？

您的解决方案 - vh 单位