Question

这是我的代码：

<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”时才会设置。 / p>

这是我的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");
      }
  });
});

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

Answer 1

您需要预先加载图片才能知道高度，否则您永远无法获得每张图片的正确高度：

$(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'元素。

Answer 2

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

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

jquery设置自适应顶部边距到图像

2 个答案: