css - 如何使图像大于网站，使网站保持在 100vh

Question

我正在制作一个背景动画，其中 3 个图像向左滑动，并且在它们滑动时彼此淡入淡出。链接:www.nettyneets.com

该页面是一个单页网站(调整到浏览器窗口，100% 宽度，100vh)。

我的问题是，因为图片是100%宽度，当它向左滑动时，右边没有任何东西，因此我需要把图片放大，这样当它滑动时，背景是不可见的，但同时时间我需要保持网站 100% 宽度，100vh。

<div class="intro-body">
                <img class="c" src="img/img3.jpeg" />
                <img class="b" src="img/img2.jpeg" />
                <img class="a" src="img/img1.jpeg" />

        </div>

CSS

.intro .intro-body {
width:100%;
height:auto;
position:relative;
}

.intro-body img {
width:100%;
height:100vh;
position:absolute;
z-index:1; 
}

img.a {
    animation: animatedBg1 12s infinite;
    z-index: 3;
    opacity:0.5;
}
img.b {
    animation-delay: 4s!important;
    animation: animatedBg1 12s infinite;
    z-index: 2;
}
img.c {
    animation-delay: 8s!important;
    animation: animatedBg1 12s infinite;
    z-index: 1;
}

Answer 1

我不知道这是否是最佳解决方案，但您可以这样做:

.intro-body{ 
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

然后您可以设置任何您想要的图像大小，它不会超过 100% width 和 height。