CODEWITHSUNDEEP
jqueryhtmlcss
El Tito Barte
El Tito Barte

Reputation: 275

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

Upvotes: 1

Views: 697

Answers (2)

vohrahul
vohrahul

Reputation: 1191

Try this: https://jsfiddle.net/me3jdqc4/10/

Look at the first image, how an image with bigger height shows the bottom-center part of the image.

$(function(){
	$(".mainImg > div:gt(0)").hide();
  
  setInterval(function(){
  	$('.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

Taking help from Mikael's solution, you can also try this: https://jsfiddle.net/me3jdqc4/11/

Upvotes: 0

Mikael Eliasson
Mikael Eliasson

Reputation: 5227

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

Upvotes: 1

Related Questions