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 と画像の高さがわかりません。img が div よりも背が低く、div class="one" の場合にのみ、div と img の高さに相対的なトップマージンを設定したいと考えています。

これは私の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 に答える