在div中存檔圖像堆棧

Question

我無法將我的圖像填充到單個div，堆滿了所有圖像。這似乎是他們放置在一個行

@keyframes fade { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    11.11% { 
 
    opacity: 1; 
 
    } 
 
    33.33% { 
 
    opacity: 1; 
 
    } 
 
    44.44% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
.fadein { 
 
    position: absolute; 
 
    height: 200px; 
 
    width: 400px; 
 
    display: inline-block; 
 
    background-size: contain; 
 
    overflow: hidden; 
 
    border: 4px solid #2e7645; 
 
    background-size: cover; 
 
    background-position: center; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    overflow: hidden; 
 
    /** outline: 1px solid blue; **/ 
 
} 
 

 
.fadein img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    z-index: -1; 
 
    position: relative; 
 
    left: 0; 
 
    right: 0; 
 
    opacity: 0; 
 
    animation-name: fade; 
 
    animation-duration: 9s; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
.fadein img:nth-child(1) { 
 
    animation-delay: 0s; 
 
} 
 

 
.fadein img:nth-child(2) { 
 
    animation-delay: 3s; 
 
} 
 

 
.fadein img:nth-child(3) { 
 
    animation-delay: 6s; 
 
}

<div class="fadein"> 
 
    <img src="http://via.placeholder.com/350x150" style="width:100%"> 
 
    <img src="http://lorempixel.com/output/animals-q-c-350-150-1.jpg" style="width:100%"> 
 
    <img src="http://lorempixel.com/output/technics-q-c-350-150-2.jpg" style="width:100%"> 
 
</div>

Link我的小提琴

Answer 1

所有你需要做的是從改變你的img的positionrelative到absolute：

.fadein img 
{ 
    ... 
    z-index: -1; 
    position:absolute; // <-- this is the important change 
    left:0; 
    right:0; 
    ... 

} 

Answer 2

如果你也想要填充你的容器，在position:absolute（如Niles Tanner提到）height和width的值後加100%。 （順便說一句，你不需要z-index屬性）

.fadein img 
{ 
    max-width: 100%; 
    max-height:100%; 
    height:100%; 
    width:100%; 
    z-index: -1; 
    position:absolute; 
... 

如果你確信你的照片具有相同的尺寸，改變你的.fadein div的尺寸保持的比例。

.fadein 
{ 
    position:absolute; 
    height:150px; 
    width:350px; 
...