css - 100% viewport height 在大显示器上工作而不是笔记本电脑？

Question

我想让我的主图适合视口(viewport)的 100% 高度。我通过将 height: 100vh; 添加到 class="video-hero"(拉伸(stretch)图像渐变)并添加以增加图像大小来实现这一点，向图像 video-hero 添加了一个类-placeholder-small.jpg，高度:100vh;。

然而，这会导致图像右侧出现奇怪的灰色部分(在我的笔记本电脑上)，但在我的大侧面显示器上似乎不是问题。

我的最小宽度为 100%，如果移除时图像在我的笔记本电脑上而不是在我的大屏幕显示器上居中。这可能与问题有关吗？

.video-hero__media-wrapper
{
min-width : 100%
}

视频演示:https://www.screencast.com/t/Oftl68noHO

视频演示解释:在视频的右侧(我的笔记本电脑屏幕)，主图没有全宽拉伸(stretch)(而是显示奇怪的灰色部分)，然后我将它放到我的大侧面显示器上，它神秘地工作了？

HTML

    <div class="hero">
    <div class="video-hero video-hero--featured"></div>
    ::before
    <div class="video-hero__media-wrapper">
    <picture>
           <img class="big-home-image" src="https://wb.workbooks.com/resources/=QzM/using-crm-on-a-laptop.jpg" alt="Using Workbooks CRM on a laptop">
    </picture>
        </div>
    <div class="video-hero__content"></div>
    </div>
<div class="video-hero__content">
</div>
</div>

CSS

.video-hero {
    height: 100vh;
    padding-top: 420px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

大型显示器的屏幕分辨率:1920x1200

笔记本电脑的屏幕分辨率:1366x768

网站网址: https://workbooks.com - 实时站点，因此我没有将更改应用到视口(viewport)高度。

Answer 1

这段代码中有一些拼写错误，但是当我将 hero img 宽度设置为 100% 并将 video-hero 包装器类设置为 100vh 时，它在笔记本电脑和台式机显示器上看起来是正确的。