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

小编典典

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

css

我有一个div，width:100px并且height:100px（说）里面有一个图像，高度始终固定为100px。

我想使图像水平居中。

这里有3种情况：

图片的宽度等于div的宽度，没有问题
图片的宽度小于div的宽度，我可以margin: auto在这里使用
图片的宽度大于div的宽度

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

意味着，如果image的宽度为120px和div的宽度为，100px并且overflow:hidden 我希望图像的第10 px至110
px可见（因此，left: 10px和right: 10px的图像隐藏在div下）

是否可以通过某些CSS属性实现？
（我不知道正在加载的图像的宽度！所以我希望它是动态的。也想避免使用JavaScript进行侧面计算，以找到多余的宽度并给margin- left:-ve值bla bla。）

另外，我不能给出background-imagediv 的图像！

阅读 291

2020-05-16

共1个答案

小编典典

参见：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;
}

2020-05-16