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');