3

オーバーフローが隠されている div 内の画像を中央に配置したい

フレームのように、サイズに関係なく画像が中央に配置されます。

<div class="holder">
   <div id="frame">
      <img src="http://www.travelblog.org/Wallpaper/pix/tb_fiji_sunset_wallpaper.jpg" class="centerme"/>
   </div>
</div>​

詳細については、画像を参照してください: ここに画像の説明を入力

標準状態は、overflow:hidden; で常にどのようになるかです。

ただし、フレームの 3 倍の大きさの画像であっても、常に中央に配置する必要があります。

*JSfiddle はこちら http://jsfiddle.net/UL3qp/4/

*EDIT
最後に必要なのは、このインシデントをループすることです

4

3 に答える 3

1

http://jsfiddle.net/HCabZ/2/垂直方向の中央揃えと左右の中央揃えでこれを試してください

于 2012-08-30T09:30:58.923 に答える
1

正または負のプロパティを設定することにより、jQuery を使用して画像を中央に配置するのは簡単です。margin-left

$(document).ready(function(){
    var fwidth = $('#frame').width();
    var iwidth = $('#frame img').width();
    $('#frame img').css('margin-left', Math.floor((fwidth-iwidth)/2));
});

タグを使用する代わりに、純粋な CSS のみを使用して、背景画像の css プロパティを介して実行できます。img

于 2012-08-30T10:09:44.117 に答える
0

スタイルを追加します。

#frame{padding:15px; text-align:center}
#frame img{max-width:100%}

このフィドルをチェックしてくださいhttp://jsfiddle.net/HCabZ/

于 2012-08-30T09:21:02.783 に答える