jquery - jquery垂直居中多张不同尺寸的图片

Question

我有一个流畅的网格布局，3 行，每行有 3 个不同的 % 宽度块。本质上，这是一个 3x3 网格，在视口中扩展了 horz 和 vert，尽管块的宽度不同。在每个块中，都有一个设置为 100% 宽度的图像。

我编写了这个小脚本来垂直对齐块内的这些图像，但是，margin-top 将相同的值应用于所有图像。我需要它将值应用于单个图像。

<script>
$(window).on('resize', function () {
var $gii = $('.grid-item-img');
var giih = $gii.height();
$gii.css('margin-top', + giih / -2 + "px");
}).trigger('resize');
</script>

grid-item-img 上的 CSS 是：

.grid-item-img {display: block; width: 100%; position: absolute; top: 50%;}

谢谢！

Answer 1

使用jQuery .each()：

$(window).on('resize', function () {
    $('.grid-item-img').each(function(index, element) {
        var $element = $(element);
        $element.css('margin-top', + $element.height() / -2 + "px");
    });
}).trigger('resize');