如何显示图像的底部？

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/