0

这是我的代码：

<html>
<body>
  <div id="id">
    <div class="one">
      <img>
    </div>
    <div class="two">
      <img>
    </div>
    <div class="one">
      <img>
    </div>
  </div>
</body>
</html>

我不知道 div 和图像的高度，我想设置相对于 div 和 img 高度的上边距，仅当 img 低于 div 并且仅在 div class="one" 中。

这是我的jQuery代码：

$(document).ready(function() {
  $(".one").each(function(){
    var wrapH = $(".one").outerHeight();
    var imgH = $("img").outerHeight();
    var padTop = (wrapH-(imgH))/2;
      if (padTop>0){
        $("img").css("margin-top", padTop + "px");
      }
  });
});

这会改变所有图像的边距...帮助

4

2 回答 2

2

您需要预先加载图像以了解高度，否则您将永远无法获得每个图像的正确高度：

$(document).ready(function() {
  $(".one").each(function(){
    var wrap = $(this),
    wrapH = wrap.outerHeight(),
    img = wrap.find('img'),
    image = new Image(),
    imgH = 0,
    padTop = 0;

    image.onload = function () {
        imgH = img.outerHeight();
        padTop = ( wrapH - ( imgH ) )/2;
        if ( padTop > 0 ){
             img.css("margin-top", padTop + "px");
        }
    }

    image.src = img.attr('src');

  });
});

另外，请注意在“each”方法上下文中使用 $(this) 来获取每个“each”步骤中的当前 '.one' 元素，以及 jQuery 的 find 方法来定位作为指定子标签的 img 标签元素。使用 $('.one') 和 $('img') 将始终选择文档中的每个 '.one' 和 'img' 元素。

于 2013-06-01T05:14:25.353 回答
1

尝试更改
var imgH = $("img").outerHeight();为
var imgH = $(".one img").outerHeight();

也
$("img").css("margin-top", padTop + "px");改成
$(".one img").css("margin-top", padTop + "px");

于 2013-05-31T22:03:34.847 回答