html - 如何使包装内的图像跨越包装的整个宽度

Question

我想知道如何让我网站中的图像跨越我网站包装部分的整个宽度。请记住，这个包装器占整个网站主体的 85%。

这是相关图像的 HTML:

<div id="index_banner">
                                         <img class="bottom" src="images/SPAWN IMAGE.png" alt="INDEX BANNER">
                                         <img class="top" src="images/SURVIVAL IMAGE - GAMEMODES.png" alt="INDEX BANNER 2">
                                     </div>

这是该页面上图像的 CSS:

#index_banner {height: 360px;
               position: relative;}

#index_banner img {position: absolute;
                   animation: cf4FadeInOut 15s;
                   -webkit-animation: cf4FadeInOut 15s;
                   -webkit-animation-iteration-count: infinite;
                   animation-iteration-count: infinite;
                   animation-timing-function: ease-in-out;}

#index_banner img:nth-child(odd) {-webkit-animation-delay: -8s;
                                  animation-delay: 8s;
                                  animation-timing-function:ease-in-out;}

@-webkit-keyframes cf4FadeInOut {
   0% {
        opacity:0;
    }
    30% {
        opacity:0; 
    }
    40%{
        opacity:1; 
    }
    75%{
        opacity:1; 
    }
    85%{
        opacity:1; 
    }

    100% {
        opacity:0;
    }

}

@keyframes cf4FadeInOut {

   0% {
        opacity:0;
    }
    30% {
        opacity:0; 
    }
    40%{
        opacity:1; 
    }
    75%{
        opacity:1; 
    }
    85%{
        opacity:1; 
    }

    100% {
        opacity:0;
    }

}

Answer 1

我认为这fiddle做你正在寻找的东西:

#index_banner {height: 360px;
               position: relative;
               width: 85%;}                 <-- added this

#index_banner img {position: absolute;
                   width: 100%;             <-- and this
                   animation: cf4FadeInOut 15s;
                   -webkit-animation:
.................
.................

有了这个，index banner 占据了页面宽度的 85%，里面的图片占据了 index banner 宽度的 100%。