How to display the bottom of an image?

Question

i have a simple slide show image div. I'm trying to show the bottom of the image because always is showing the top.

HTML Code:

<div class="mainImg">

    <div>

        <img src="image1.jpg" />

    </div>

    <div>

        <img src="image2.jpg" />

    </div>

    <div>

        <img src="image3.jpg" />

    </div>

</div>

Jquery Code:

$(function(){

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



    setInterval(function(){

        $('.mainImg > div:first')

        .fadeOut(2000)

        .next()

        .fadeIn(2000)

        .end()

        .appendTo('.mainImg');

    }, 8000);

});

CSS Code:

.mainImg {

    position: relative;

    width: 100%;

    max-height: 500px;

}

.mainImg > div {

    position: absolute;

    width: 100%;

    max-height: 500px;

    overflow: hidden;

}

.mainImg > div > img {

    width: 100%;

}

The code is working perfectly but the image is showing only the top part of 500px, and if the image have different height sizes how to do it?

Answer 1

The simplest change is to make the image absolutely positioned and dock it to the bottom of the container.

You will see the difference in your fiddle sample moe clearly if you lower the height to 300px.

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

How to display the bottom of an image?

Sign up