0

高さ250pxに拡大した後、画像の幅に応じて画像をdivの中央に配置しようとしています。

たとえば、サイズが 625x450 の画像があり、CSS ファイルで画像の高さを 250px に設定した場合、幅は自動的に 347.22px にスケーリングされます。そのスケーリングされた幅を検出し、(幅 - 高さ)/2 のマージン左を設定して画像を中央に配置できるようにしたいと考えています。

ハードコーディングされた形式のこの例の CSS は次のようになります (フィドル全体はhere です)。

.gallery {
    width: 250px;
    overflow: hidden;
    position: relative;
}

.gallery img {
    height: 250px;
    width: auto;
    margin-left: -48px;
}

しかし、私は他の次元の画像でこれをその場で実行できるようにしたいと考えています. ハードコーディングされた CSS の margin-left 行を切り取り、いくつかの jQuery を追加することで、これを実行しようとしました (フィドル全体はhere です)。

$(document).ready(function(){
    oldWidth = $('.gallery img').width();
    newMarg = (oldWidth - 250)/2);       
    $('.gallery img').css("margin-left", newMarg);
}

しかし、私はそのアプローチで成功していません。私が台無しにしているのはjQueryの何かでなければなりません。私はここでやろうとしていることすべてに非常に慣れていないので、単純なものが欠けているように感じます。

4

4 に答える 4

1

この投稿で提案されているように

その投稿の概念に適応するようにjsFiddleを変更しました。

jsFiddle

<div class="outer">
   <div class="inner">
       <img src="" />
   </div>
</div>

と

.outer {
  width: 250px; overflow: hidden;
}
.inner {
  float: left; position: relative; left: 50%;
}
.inner img {
  height: 250px; display: block; position: relative; left: -50%;
}

このソリューションのプラス面は、JavaScriptに依存しないことです

于 2012-11-25T19:03:03.833 に答える
0

括弧の位置が間違っていることを除けば、減算を逆にしました。

$(document).ready(function() {
    oldWidth = $('.gallery img').width();
    newMarg = (250 - oldWidth) / 2;
    $('.gallery img').css("margin-left", newMarg);
});​

http://jsfiddle.net/99PMd/10/

ただし、複数ある場合、.galleryまたはimgその内部にある場合、変数oldWidthは DOM で最初に見つかったそのような画像のみと等しくなることに注意してください。そのような画像やギャラリーが複数ある場合は、コードをループでリファクタリングする必要があります。

$(document).ready(function() {
    $('.gallery img').each(function() {
        oldWidth = $(this).width();
        newMarg = (250 - oldWidth) / 2;
        $(this).css("margin-left", newMarg);
    });
});​

http://jsfiddle.net/99PMd/11/

個人的には、このようなオーバーフロー画像は魅力的ではないと思うので、コンテナに合わせて画像のサイズを変更します。これは、純粋な CSS で実行できます。

.gallery img {
    height: auto;
    max-width:100%;
}​

http://jsfiddle.net/99PMd/12/

于 2012-11-25T18:45:12.850 に答える
0

jsフィドル

$(window).load(function(){

   var galW = 250;
   var imgW = $('.gallery img').width();

   if(imgW>galW){
       $('.gallery img').css({marginLeft: (galW-imgW)/2 })   ;
   }

});
于 2012-11-25T18:53:18.267 に答える
0

画像を display:block に設定すると、margin: 0 auto;text-align:center; を使用できます。

于 2012-11-25T18:19:58.530 に答える