El Tito Barte El Tito Barte - 3 months ago 8
HTML Question

How to display the bottom of an image?

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?

enter image description here

Answer

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