如何使图片大于网站，保持网站100vh

我正在制作背景动画，其中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;
}

---

我不知道如果这是最好的解决方案，但你可以这样做：

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

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

链接地址: http://www.djcxy.com/p/88221.html

上一篇: How to make an image bigger than the site, keeping the website at 100vh

下一篇: Background image jumps when address bar hides iOS/Android/Mobile Chrome