填充 100% 宽度和高度时，将图像居中放置在 div 中答案

【问题标题】：Centre an image within a div when filling 100% width and height填充 100% 宽度和高度时，将图像居中放置在 div 中
【发布时间】：2016-01-25 14:53:23
【问题描述】：

我正在尝试将img 居中在包含div 中，其中img 填充（最小）包含div 的宽度和高度的 100%，这意味着图像会自动缩放以保持图像比例。我很容易将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

【问题讨论】：

不清楚你想要达到什么目标。请尝试更好地指定

标签： html image css

【解决方案1】：

如果您对 CSS3（某些旧浏览器不支持）感到满意，您可以这样做：

#hero-image img {
    position: absolute;
    min-height: 100%;
    height: auto;
    min-width: 100%;
    width: auto;
    margin: auto;
    left: 50%;
    top: 50%;
    z-index: 0;
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
}

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

#hero-image img {
    position: absolute;
    min-height: 100%;
    height: auto;
    min-width: 100%;
    width: auto;
    margin: auto;
    left: 50%;
    top: 50%;
    z-index: 0;
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
}

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

【讨论】：

【解决方案2】：

你可以试试这个：

CSS

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

#hero-image img {
    position: absolute;
    display:block;
    height: auto;
    margin: 0 auto;
    top: 0;
    z-index: 0;
    min-height:100%;
    width:100%;
    left: -50%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);

}

HTML

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

DEMO HERE

【讨论】：

嗨，这也是我得到的解决方案，但是如果您将浏览器缩放到狭窄的视口，您会注意到它开始扭曲图像。有什么想法吗？
是的...只使用媒体查询

【解决方案3】：

您也可以使用background-size: cover 将其设置为背景。像这样：https://jsfiddle.net/wzjzjsdp/2/

.img1, .img2 {
    height: 400px;
    width: 300px;
    background-image:url(http://placehold.it/350x150);
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
    display:inline-block;
}
.img2 {
    width:500px;
    height:400px;
}

<div class="img1"></div>
<div class="img2" style="background-image:url(http://placehold.it/350x250"></div>

编辑：您可以使用内联样式。

【讨论】：

嗨，我不能使用背景图像，因为图像是从 Wordpress 动态拉入的。谢谢！
但是你可以使用内联样式吗？

【解决方案4】：

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

Here the fiddle

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

【讨论】：

嗨@lateek35。太好了，非常感谢您的帮助，正是我想要的！

【解决方案5】：

你能不把英雄形象设置为背景吗？这将允许在定位和图像大小方面更加灵活。

<section class="hero-image" style="background-image:url('https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg');">
</section>

.hero-image {
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

这完全实现了您的目标。这种方法还有其他好处，例如响应式图像。

上面的 CSS 为 hero-image 的 div 类中的任何背景图像设置属性。然后，您需要做的就是内联背景图像本身。

注意：如果这不必由 CMS 驱动，您可以简单地将图像应用到类而不是内联。

【讨论】：