如何实现类似于scabal.com？

Question

我正在尝试在引导程序中创建两列高度为100％且宽度为50％的列，其中左列将播放视频，视频应响应列。

在scabal.com中，如果向下滚动，可以看到我正在寻找的类似效果。

我如何实现这一目标？ 我尝试过很多东西，但没有运气。我用h-100，柱子和行给出了100％的高度，但是没有达到预期的效果。我设法在我的左栏col-lg-6中保留了一段视频，但视频没有响应，也没有扩展到100％的高度。

请帮忙。

代码如下：

<section id="product-types-women" class="h-100">
    <div class="container-fluid">
        <div class="row">


            <div class="col-lg-6" data-aos="fade-left">

                       <div class="video-wrapper">
                        <video poster="poster.png" autoplay="true" loop class="h-100">
                            <source src="Assets/videos/hero.mp4" type="video/mp4">
                            <source src="Assets/videos/hero.webm" type="video/webm">
                        </video>
                    </div>

            </div>

            <div class="col-lg-6">
                <h1 class="text-center">Designer Boutique For Women</h1>
                <p class="lead text-center">Your own personalized boutique at your doorstep, Call our expert designer home for all your tailoring needs.</p>
                <a href="#" class="btn btn-lg btn-primary">Click Here</a>
            </div>

        </div><!--row-->
    </div><!--container fluid-->
</section><!--product types women-->

css part -

#product-types-women .row{
display: flex;
align-items: center;
}
#product-types-women .col-lg-6{
padding: 0;
flex-basis: 100%;
text-align: center;
}

#product-types-women .col-lg-6 video{
width: 100%;
height: 100%;
}

我只是希望左侧列的视频将其高度增加到100％并将其覆盖为右侧的文本 寻找回应。非常感谢你。

Answer 1

使用一个名为 - object-fit：fill;的简单属性修复它。在视频上。 CSS看起来像这样：

#product-types-women .col-lg-6{
padding: 0;
flex-basis: 100%;
text-align: center;
height: 100vh;
}

#product-types-women .col-lg-6 video{
width: 100%;
display: block;
height: 100%;
object-fit: fill;
}

最终结果：

谢谢大家。