이미지 하단을 표시하는 방법은 무엇입니까?

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 코드 : 코드는 완벽하게 작동되지만 이미지가 500 픽셀의 상단 부분을 보여주고있다

.mainImg { 
    position: relative; 
    width: 100%; 
    max-height: 500px; 
} 
.mainImg > div { 
    position: absolute; 
    width: 100%; 
    max-height: 500px; 
    overflow: hidden; 
} 
.mainImg > div > img { 
    width: 100%; 
} 

, 이미지의 높이가 다른 경우 어떻게 처리할까요?

Answer 1

간단한 변화는 이미지 절대 위치와 도킹을 만드는 것입니다 용기의 바닥에 붙인다.

높이를 300px로 낮추면 피들 샘플 모어의 차이가 분명하게 보입니다.

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

Answer 2

이 시도 : 더 큰 높이 이미지가 이미지의 하단 중앙 부분을 표시하는 방법 첫 번째 이미지에서 https://jsfiddle.net/me3jdqc4/10/

봐. 미카엘의 솔루션의 도움을받는

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

또는

, 당신이 시도 할 수 있습니다 : https://jsfiddle.net/me3jdqc4/11/