jQuery를 사용하여 여러 이미지를 서로 다른 높이로 세로로 정렬하려면 어떻게해야합니까?

Question

이미지를 슬라이드하는 스크립트를 만들었습니다. 각 이미지는 "슬라이드"div에 포함되어 있습니다. 내가하고 싶은 일은 jquery를 사용하여 각 이미지를 수직으로 정렬하는 것입니다. 현재 내가 사용하고 : 나는 나타났습니다 무엇

$('.slide img').each(function() { 
    var image_height = $(this).height(); 
    var height_margin = (image_height/2)*-1; 
    $('.slide img').css('margin-top', height_margin); 
    $('.slide img').css('top', 50%);  
    $('.slide img').css('height', image_height);  

}); 

이는 <div class"slide"></div> 모든 태그에 첫 번째 이미지에서 첫 번째 높이와 마진을 적용한다는 것입니다. 또한 : <div class"slide"></div>에는 600px의 일정한 높이가 있습니다.

모든 이미지가 동일하지 않고 나는 그것이 역동적 이길 원합니다 ... 어떤 생각입니까?

Answer 1

이 선택기가 모든 스타일을 변경하므로 루프 안에 $('.slide img')을 사용하면 안됩니다. 현재는 마지막 이미지의 설정을 모든 이미지에 적용하고 있습니다. 코드의 다른 오류 : 50%을 인용하는 것을 잊었습니다.

$('.slide img').each(function() { 
    var $this = $(this); 
    var image_height = $this.height(); 
    var height_margin = (image_height/2)*-1; 
    $this.css('margin-top', height_margin); 
    $this.css('top', '50%');  
    $this.css('height', image_height);  
}); 

코드는 더욱 최적화 할 수 있습니다

$('.slide img').each(function() { 
    var $this = $(this); 
    var image_height = $this.height(); 
    var height_margin = -image_height/2 
    $this.css({'margin-top', height_margin, 
       'top', '50%', 
       'height', image_height 
       });  
}); 

Answer 2

.slide 컨테이너의 높이가 일정하면 CSS에서 display:block 및 margin:auto 0; ~ .slide img을 적용하여 동일한 효과를 얻을 수 있습니다 ... JS 계산이 필요하지 않습니다.

Answer 3

확인을 나는 다음 수업 시간에 vertical-align:middle를 사용, 먼저 포함 DIV의 line-height이 가장 높은 이미지의 높이를 일치하는지 확인, 해결책을 가지고있는 당신을 모든 이미지에 적용 할 수 있지만 이미지가 display:inline으로 설정되어 있는지 확인하십시오.

div.container {line-height:300px;} /*or whatever that may be, then*/ 
img.slides {vertical-align:middle;}