100%视口高度工作在大显示器，而不是笔记本电脑？

Question

我想使我的英雄形象，以适应100%的高度的视口。为此，我将height: 100vh;添加到class=“视频英雄”(扩展图像梯度)，并增加图像大小，使用height: 100vh;向图像video-hero-placeholder-small.jpg添加一个类。

然而，这是一个奇怪的灰色部分在图像的右边(当我的笔记本电脑)，但似乎不是一个问题，在我的大型侧显示器。

我有一个最小宽度100%，如果删除时，图像集中在我的笔记本电脑，但不是在我的大型侧显示器。这是否与问题有关？

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

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

视频演示说明:在视频的右侧(我的笔记本电脑屏幕)，英雄形象不会伸展到全宽(而是显示奇怪的灰色部分)，然后我把它放到我的大侧面显示器上，它神秘地工作？

    <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 - Live，所以我没有将更改应用到视口高度。

Answer 1

在这段代码中有一些输入，但当我将英雄img宽度设置为100%，将视频英雄包装类设置为100 on时，它在笔记本电脑和台式监视器上就会显示出来。