如何顯示圖像的底部？

Question

我有一個簡單的幻燈片放映圖像股利。我試圖顯示圖像的底部，因爲總是顯示頂部。

HTML代碼：

<div class="mainImg"> 
    <div> 
     <img src="image1.jpg" /> 
    </div> 
    <div> 
     <img src="image2.jpg" /> 
    </div> 
    <div> 
     <img src="image3.jpg" /> 
    </div> 
</div> 

jQuery代碼：

$(function(){ 
    $(".mainImg > div:gt(0)").hide(); 

    setInterval(function(){ 
     $('.mainImg > div:first') 
     .fadeOut(2000) 
     .next() 
     .fadeIn(2000) 
     .end() 
     .appendTo('.mainImg'); 
    }, 8000); 
}); 

CSS代碼：

.mainImg { 
    position: relative; 
    width: 100%; 
    max-height: 500px; 
} 
.mainImg > div { 
    position: absolute; 
    width: 100%; 
    max-height: 500px; 
    overflow: hidden; 
} 
.mainImg > div > img { 
    width: 100%; 
} 

的代碼可以正常使用，但圖像顯示只有500像素的頂部，如果圖像有不同的高度尺寸怎麼做？

Answer 1

最簡單的更改是使絕對定位和對接圖像它到達容器的底部。

如果將高度降低到300px，您將清楚地看到您的小提琴樣本moe中的差異。

.mainImg > div > img { 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    } 

Answer 2

試試這個： https://jsfiddle.net/me3jdqc4/10/

查看第一形象，以更大的高度的圖像是如何顯示圖像的底部中心部分。

$(function(){ 
 
\t $(".mainImg > div:gt(0)").hide(); 
 
    
 
    setInterval(function(){ 
 
    \t $('.mainImg > div:first') 
 
    .fadeOut(2000) 
 
    .next() 
 
    .fadeIn(2000) 
 
    .end() 
 
    .appendTo('.mainImg'); 
 
    }, 2000); 
 
});

.mainImg { 
 
    position: relative; 
 
    width:100%; 
 
    max-height: 500px; 
 
    min-height: 500px; 
 
} 
 
.mainImg > div { 
 
    position: absolute; 
 
    width: 100%; 
 
    max-height: 300px; 
 
    min-height: 300px; 
 
    overflow: hidden; 
 
    /*Remove this width*/ 
 
    width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainImg"> 
 
    <div style="background: url('http://www.viralthread.com/wp-content/uploads/2015/12/gfssgg.jpg') no-repeat center"> 
 
    </div> 
 
    <div style="background: url('http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg') no-repeat center"> 
 
    </div> 
 
    <div style="background: url('http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg') no-repeat center"> 
 
    </div> 
 
    </div>

OR

從的Mikael的解決方案以幫助，你也可以試試這個： https://jsfiddle.net/me3jdqc4/11/