Question

我想让我的英雄形象适合视口的100％高度。我通过将height: 100vh;添加到class =“video-hero”（拉伸图像渐变）并添加以增加图像大小，通过video-hero-placeholder-small.jpg向图像height: 100vh;添加了一个类来实现此目的。

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

我的最小宽度为100％，如果移除后将图像置于笔记本电脑上，而不是放在我的大型侧面显示器上。这可能与问题有关吗？

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

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

视频演示解释：在视频的右侧（我的笔记本电脑屏幕），英雄图像没有拉伸全宽（而是显示奇怪的灰色部分），然后我把它带到我的大型侧面显示器上，它神秘地工作？

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

大型显示器的屏幕分辨率： 1920×1200

笔记本电脑的屏幕分辨率 1366×768

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

Answer 1

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

在大型显示器上工作的100％视口高度但不是笔记本电脑吗？

1 个答案: