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

抱歉，如果这个问题已经得到了回答-我已经尝试了几乎所有的技巧，我已经遇到了到目前为止没有任何运气的图像居中。这张图片只是拒绝水平居中

JSFIDLE

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>

.imgInner:我试过文本对齐：居中；尝试在高度和宽度为100%时添加尺寸标注

您会注意到，在小提琴中，第二个图像是纵向的，并且与预期的垂直居中完全一致

如果拍摄横向图像并将宽度设置为100%，而不是高度，则该图像也会垂直居中，不会出现问题，其上方和下方的空白比大于4:3

只有当高度为100%时，图像才会默认为左对齐，似乎忽略了左右定位

我唯一的怀疑是div.imgOuter没有高度，只有填充值。如果是这种情况，那么我将无法解决缩放纵横比和中心对齐问题：(

---

有什么建议吗？

可以肯定的是，单用CSS无法做到这一点，因为水平和垂直居中的任何负边距解决方案只有在可以使用固定大小时才有效（因为使用负百分比边距将从父容器而不是元素的原始大小中获取百分比）

但是，您可以使用JS来实现这一点

这样，我们使用百分比<代码>左和<代码> Tope<代码>正好坐在中间（但从图像的左上角）：

然后，我们使用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);
});

---

看看这是否回答了你的问题

---

如果需要交换调整大小的方法，可以将

背景大小：100%自动；

更改为

背景大小：100%；

。

谢谢你的想法。我想在重新调整浏览器大小时，你只需重新调用此函数。我在加载脚本期间而不是在浏览器中解决了此问题。如果图像高度/宽度>=0.75，则宽度仅设置为100%，我们很高兴。如果高度/宽度为将来试图解决此问题的任何人更新了小提琴：感谢Manoj，使用CSS插入内联服务器端，这也是一个解决方案。更新了小提琴：无论哪种方式，解决方案都需要基于图像评估逻辑的转换规则。我们将我想知道是服务器端更高效，还是客户端更高效。

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

$('.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);
});