jquery - 如何使用 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

你不应该在 .each 循环中使用 $('.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
              });    
});