Question

这似乎是一个容易回答的问题，但它是我一直苦苦挣扎的问题。

首先让我解释一下我想要实现的目标。

我有一个图像库，我希望每个图像在其容器内垂直居中。图像具有不同的形状，大小和宽高比，因此我的代码需要对于其中的每个图像是可变的。以下是我到目前为止的情况：

<div id="cbp-fwslider" class="cbp-fwslider">
    <img src="images/large/1.jpg" alt="img01"/>
    <img src="images/large/2.jpg" alt="img02"/>
    <img src="images/large/3.jpg" alt="img03"/>
</div>

这是我的javascript：

var $img = $('div#cbp-fwslider img');
var ih = $img.height();
var $div = $('div#cbp-fwslider');
var dh = $div.height();
if (dh > ih) {
    var dif = (dh - ih);
    $img.css('margin-top', + dif / 2 + "px");
}

现在，这部分有效。它的作用是计算正确的＆＃34; margin-top＆＃34;将容器中的第一个图像垂直居中，然后将其应用于所有相关图像。我毫不怀疑这是因为我已经设置了javascript以设置＆＃34; margin-top＆＃34;所有图像都一样。

我的问题是，如何设置变量以使其对我放入图库中的所有项目单独执行此操作？

请原谅我，如果这是一个基本的问题，我可以在其他地方找到答案，当涉及到javascript时，我的耳朵很蹩脚。

如果有人知道一种更容易/更有效的方式来实现我想要的东西，那么如果你能指出我正确的方向那就太棒了。

我必须告知容器具有动态高度，所有图像也是如此。由于画廊的工作方式，我无法使用绝对定位，THIS技术似乎也无法发挥作用。

提前感谢您的帮助。

Answer 1

您希望在每张图片上单独运行代码，而不是在图像集上运行代码。您可以使用each遍历集合来执行此操作：

$('div#cbp-fwslider img').each(function(){
    var $img = $(this);
    var ih = $img.height();
    var $div = $('div#cbp-fwslider');
    var dh = $div.height();
    if (dh > ih) {
        var dif = (dh - ih);
        $img.css('margin-top', + dif / 2 + "px");
    }
});

Answer 2

您可以使用css垂直对齐所有图像到中心。

<div id="cbp-fwslider" class="cbp-fwslider">
    <img src="images/large/1.jpg" alt="img01"/>
    <img src="images/large/2.jpg" alt="img02"/>
    <img src="images/large/3.jpg" alt="img03"/>
</div>

CSS

img {
    vertical-align: middle;
}

请参阅http://jsfiddle.net/vishnurajv/xR28t/

Answer 3

尝试找到img中div的最大高度，然后为所有其他margin-top设置img。这是我的想法，你或某人可以做得更好。

var maxHeight = 0;
$('div#cbp-fwslider img').each(function(){
  if($(this).height() > maxHeight) maxHeight = $(this).height();
});
$('div#cbp-fwslider img').each(function(){
  $(this).css('margin-top', Number(maxHeight - $(this).height()) / 2 + 'px');
});

希望有所帮助！

Javascript设置一个在每个子项上更改的变量

3 个答案: