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方法，例如：

将图像放在vertical-align：middle table cells
对象适合规则https://css-tricks.com/almanac/properties/o/object-fit/
etc：）

Answer 2

您有几个选项，但它们取决于您希望图像的行为方式。这些解决方案使用css。你不应该为你的问题做任何javascript。

如果图像应覆盖每个图像中的所有可用空间 <article>，然后将它们设置为css的背景并使用 background-size: cover或使用object-fit: cover而不进行设置他们作为背景。 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
将<article>元素设置为display：flex，然后设置align-items: center和justify-content: center。

Answer 3

我认为你可以使用普通的CSS，如果你对文章标签有相对或绝对的位置，我不能说，因为你还没有添加任何CSS。您可以尝试将此代码写入css文件...

article img{
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}

如何在自定义幻灯片中居中图像

3 个答案: