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>​

查看图片了解更多信息： 在此处输入图像描述

标准状态总是溢出：隐藏；

但需要它始终居中，即使是比框架大 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 回答