如何显示图片的底部？

Question

我有一个简单的幻灯片放映图片div。我试图显示图像的底部，因为总是显示顶部。

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%;
}

代码工作正常但图像只显示500px的顶部，如果图像有不同的高度尺寸怎么办？