将图像对齐到较小div内的中心

Question

我有一个div width:100px和height:100px(比方说)在里面,只有一个图像,高度总是固定的100px.

我想让图像水平居中.

这里有3个案例:

1. 图像的宽度等于div的宽度,没有问题
2. 图像的宽度小于div的宽度,我可以margin: auto在这里使用
3. 图像的宽度大于div的宽度

我希望图像的中心部分在div中可见.

意味着,如果图像的宽度是120px和div的宽度是100px,overflow:hidden 我希望图像的第10个px到第110个px是可见的(所以,图像的left: 10px和right: 10px隐藏在div下面)

这可能通过一些CSS属性吗？ (我不知道正在加载的图像的宽度!所以我希望它是动态的.还想避免javascript端计算找到额外的宽度和给予margin-left:-ve值bla bla ..)

另外,我不能给background-imagediv 的图像!

Answer 1

请参阅: http ://jsfiddle.net/thirtydot/x62nV/(并且不要overflow: hidden轻易看到居中)

这适用于所有浏览器,可能除了IE6.

因为.imageContainer > span,margin-left派生自width,并且width是控制将支持的最大图像宽度的任意数字.width: 10000px; margin-left: -4950px;如果需要,您可以设置支持非常宽的图像.

HTML:

<div class="imageContainer">
    <span><img src="http://dummyimage.com/100x100/f0f/fff" /></span>
</div>

CSS:

.imageContainer {
    border: 1px solid #444;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 15px;
    text-align: center;
}
.imageContainer > span {
    display: block;
    width: 1000px;
    margin-left: -450px; /* -(width-container width)/2 */
}
.imageContainer > span > img {
    display: inline-block;
}