How to make an image bigger than the site, keeping the website at 100vh

I am working on a background animation where 3 images slide to the left, and while they are sliding they fade into each other. link: www.nettyneets.com

The page is a one page website (resize to browser window, 100%width, 100vh).

My problem is that because the image is 100%width, when it slides to the left there's nothing to the right, therefore I need to make the image bigger so that when it slides the background isn't visible but at the same time I need to keep the website 100%width, 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;
}

---

I dunno if this is the best solution but you can do this:

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

and then you can set whatever size you want to images it wont go over 100% width and height .

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

上一篇: 如果标题高度：100vh，则标题背景视频会调整大小

下一篇: 如何使图片大于网站，保持网站100vh