Question

<div style="width:200px;height:200px;overflow:hidden;">
    <img src=".." this is a 300x500 image. > 
</div>

如何制作这样能够产生200x200的图像（DIV覆盖图像的其余部分），但图像居中？

最简单的方法是什么？一些JQuery插件？你会做什么？

编辑：我希望它与垂直和水平对齐。

Answer 1

更简单的解决方案：将图片设置为background-image上的<div>代替（position = 50% 50%）：）

这个可以通过jQuery achieved（并不意味着这是一个很好的方法，但只是说）：

var $div = $('div'),
    $img = $('img', $div),
    src = $img.attr('src');

$div.css('background', 'url(' + src + ') no-repeat 50% 50%');
$img.remove();

Answer 2

这应该有用，试一试

div.img{
text-align:center
}

Answer 3

这似乎有效：

您计算容器与图像之间的宽度差异，并使用负margin-left将其偏移该数量/ 2。即(300px - 200px) / 2 = 50px

<div style="width:200px;height:200px;overflow:hidden;">
    <img src="test.png" style="margin-left:-50px">
</div>

Answer 4

如果使用文本对齐中心，文本也将对齐到中心。避免div / span设置宽度为div / span的这个位置图像并使用margin：0 auto;

 <div style="width:50px; margin: 0 auto;"> <img src="test.png"></div>

请记住，您的图像也必须与div的大小相同，在这种情况下为50像素，或将图像宽度设置为50像素。

Answer 5

这是一个纯JS解决方案：http://jsfiddle.net/steve/Ljgm8/适用于任何大小的div，任何大小的图像，任何浏览器，没有容器，没有其他库。

（Firefox中的奖励 - opacity样式可让您看到基础子元素已正确居中。）

如何轻松将图像居中到DIV？

5 个答案: