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

Question

我有一个带有 width:100px 和 height:100px 的 div（比如说） 在其中，只有一个图像，其高度始终固定为100px。

我想让图像水平居中。

这里有3种情况：

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

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

意思是，如果图像的宽度是120px，而div的宽度是100px和overflow:hidden 我希望图像的第 10 像素到第 110 像素可见（因此，图像的 left: 10px 和 right: 10px 隐藏在 div 下）

这可以通过一些 CSS 属性实现吗？ （我不知道正在加载的图像的宽度！所以我希望它是动态的。 也想避免javascript边计算来找到额外的宽度并给出margin-left: -ve value bla bla..)

另外，我不能为 div 提供 background-image 的图像！

Answer 1

查看： http://jsfiddle.net/thirtydot/x62nV/（和without 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;
}