javascript - 如何将自定义幻灯片中的图像居中

Question

已修复。这是工作代码:

var cont = $(".portfolio-main-carousel-wrap article.gallery-item");
cont.each(function() {
    var $this = $(this);
    var h = $this.height();
    if (h > 550) {
        $($this).css('margin-top', + (h-550) / -2 + "px");
    }
    else {
        $($this).css('margin-top', + (550-h) / 2 + "px");
    }
});

我的幻灯片有纵向和横向图像，我正在尝试将它们居中。我已经让 jQuery 正常工作，但我无法将其应用于幻灯片中的所有图像，因为所有图像都不同并且需要计算。

这是我到目前为止所拥有的:

//Javascript
var img = $("#portfolio-main-carousel article.gallery-item img");
var h = img.height();
if (h > 550) {
    $("#portfolio-main-carousel article.gallery-item").css('margin-top', + h / -4 + "px");
}
else {
    $("#portfolio-main-carousel article.gallery-item").css('margin-top', + (550-h) / 2 + "px");
}

//Example of slideshow HTML
<div id="slideshow">
    <article>
        <a href><img></a>
    </article>
    <article>
        <a href><img></a>
    </article>
    <article>
        <a href><img></a>
    </article>
</div>

这个 jQuery 只是抓取幻灯片中的第一张图像，并将固定边距应用于所有图像。我尝试使用带有应用它的循环的数组，但无法让它工作。任何建议将不胜感激!

*编辑 - 这是供引用的数组代码:

var array = $('#portfolio-main-carousel article.gallery-item').get();
for (i=0; i<array.length; i++) {
    var $img = $(array[i] + ' img');
    var h = $img.height();
    if (h > 550) {
        $(array).css('margin-top', + h / -4 + "px");
    }
    else {
        $(array).css('margin-top', + (550-h) / 2 + "px");
    }
}

我收到语法错误，无法识别的表达式错误:[object HTMLElement] img

Answer 1

分别计算每个:

var $img = $("#portfolio-main-carousel article.gallery-item img");

$img.each(function(){

    var $this = $(this);
    var h = $this.height();

    if (h > 550) {
        $("#portfolio-main-carousel article.gallery-item").css('margin-top', ($this.closest('#slideshow').height() - $this.height())/2 + "px");
    }
/* homework...

    else {
        $("#portfolio-main-carousel article.gallery-item").css('margin-top', + (550-h) / 2 + "px");
    }
*/

});

(更具体的答案需要示例 html 和现有的 css 规则。)

如果你想要更统一的解决方案但不需要计算，你可以使用不同的CSS方法，例如:

• 将图像放入垂直对齐:中间表格单元格
• 对象拟合规则 https://css-tricks.com/almanac/properties/o/object-fit/
• 等等:)