jquery - 如何显示图像的底部？

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>

J查询代码:

$(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 的顶部，如果图片有不同的高度尺寸怎么办？

Answer 1

最简单的改变是使图像绝对定位并将其停靠在容器底部。

如果将高度降低到 300px，您会清楚地看到 fiddle 样本 moe 的差异。

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