Question

很抱歉，如果这已经得到了解答 - 我已经尝试了几乎所有我到目前为止已经遇到过的关于图像居中而没有任何运气的提示。这张图片只是拒绝水平居中！

JSFiddle here

HTML： （注意：图片是我的，只是从谷歌中取得的例子）

每张图片都收到“身高：100％;”或“宽度：100％;”装载时，取决于高宽比是否在横向方向上的4：3比例之内或之外。

这样做是为了确保图像完全填满包含div，无论它的大小和形状如何。

<div class="imgOuter">
    <div class="imgInner">
        <img src="http://www.woroni.com.au/wp-content/uploads/2013/12/Cars-Lamborghini-Free-Wallpaper.jpg" style="height: 100%;">
    </div>
</div>
<div class="imgOuter">
    <div class="imgInner">
        <img src="http://cdn.acidcow.com/pics/20100118/celebrity_portraits_by_tom_munro_03.jpg" style="width: 100%;">
    </div>
</div>

CSS：

主外部div设置为符合4：3的恒定纵横比内部div在外部div中添加了一个边框，该边框必须保持特定的大小。

div.imgOuter{
    float: left;
    position: relative;
    width: 33.3333%;
    padding-bottom: 25%;
    overflow:hidden;
    clear:none;
}
div.imgInner{
    position:absolute;
    top:0;bottom:0;left:0;right:0;
    overflow:hidden;
    text-align:center;
    border:2px solid #444;
    cursor:pointer;
}
div.imgInner>img{
    display:block;
    position:absolute;
    top:0;bottom:0;left:0;right:0;
    margin:auto;
}

.imgInner：我试过text-align：center;尝试使用高度和宽度进行尺寸调整@ 100％...

你会在小提琴中注意到第二张图像是纵向的，并且完全按预期垂直居中。

如果你拍摄风景图像并将宽度设置为100％而不是高度，它也会垂直居中而不会出现问题，在其比例上下留下的空白区域宽度超过4：3。

仅当高度为100％时，图像默认为左对齐，似乎忽略了左右定位。

我唯一的怀疑是div.imgOuter没有高度，只有填充值。如果是这样，那么我就试图解决缩放宽高比和中心对齐问题:(

有什么建议吗？

Answer 1

相当确定单独使用CSS无法做到这一点 - 因为水平和垂直居中的任何负边距解决方法仅在您可以使用固定尺寸时起作用（因为使用负百分比边距将占用父容器的百分比而非比元素的原始大小。）

但是，你可以用JS做到这一点。

http://jsfiddle.net/HkuMW/7/

因此，我们应用百分比left和top完全位于中间（但是从图片的左上角）：

div.imgInner>img {
    display:block;
    position:absolute;
    top:50%;
    left:50%;
}

然后我们使用jQuery重新定位图像，找出确切的像素尺寸，将其减半并将其弹出：

$('.imgInner > img').each(function (i) {
    var imgWidth = ((0 - parseInt($(this).css('width'))) / 2);
    var imgHeight = ((0 - parseInt($(this).css('height'))) / 2);

    $(this).css('margin-top', imgHeight);
    $(this).css('margin-left', imgWidth);
});

Answer 2

看看这是否能回答你的问题。

http://jsfiddle.net/HkuMW/17/

如果您需要更换调整大小方法，可以将background-size:100% auto;更改为background-size:auto 100%;。

当高度设置为100％时，在容器div中水平居中图像

2 个答案: