html - 填充 100% 宽度和高度时将图像居中放置在 div 中

Question

我正在尝试将 img 置于包含 div 的中心，其中 img 填充(最小)100% 的宽度和高度其中包含 div，这意味着图像会自动缩放以保持图像比例。我很容易将 img 对齐到顶部、底部、左侧或右侧，但我希望将 img 垂直和水平居中。到目前为止，我一直无法找到解决方案，因此非常感谢您的帮助。

HTML

<section id="hero-image">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>

CSS

#hero-image {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background: red;
}

#hero-image img {
    position: absolute;
    min-height: 100%;
    height: auto;
    min-width: 100%;
    width: auto;
    margin: auto;
    right: 0;
    left: 0;
    top: 0;
    z-index: 0;
}

Fiddle

Answer 1

使用 transform:translateX(-50) 来管理这个(但 CSS3)，大屏幕或小屏幕图像将始终居中并保持他的纵横比。

Here the fiddle

否则，如果你想要更多跨浏览器的东西，你可能需要一些 javascript，但我可能是错的。