javascript - 水平对齐大于其父 DIV 的图像

Question

我正在开发一个响应式网站，我想要将比父 DIV 更宽的图像水平居中。该图像与其父图像具有相同的高度。图像的宽度与高度成比例，因此可以正确渲染。我无法将图像放入背景图像。

如何使图像水平居中？最好使用 CSS，尽管使用 jQuery 也可以。

<div>
    <img src="...">
</div>

.div {
    height: 220px;
    margin: 0;
    position: relative;
    width: 100%;
}

.div img {
    display: block;
    height: inherit;
    margin: auto;
    max-width: none;
    width: initial;
}

Answer 1

使图像居中的简单方法是使用绝对位置和负translateX的组合:

.div img {
    display: block;
    height: inherit;
    margin: auto;
    max-width: none;
    width: initial;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

演示: http://jsfiddle.net/fa000nkw/