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

我试图将

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>

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

如果您对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%);
}

英雄形象{ 位置：相对位置； 宽度：600px； 高度：400px； 溢出：隐藏； 背景：红色； } #英雄形象{ 位置：绝对位置； 最小高度：100%； 高度：自动； 最小宽度：100%； 宽度：自动； 保证金：自动； 左：50%； 最高：50%； z指数：0； -webkit转换：翻译（-50%，-50%）； -moz变换：平移（-50%，-50%）； -ms转换：翻译（-50%，-50%）； -o变换：平移（-50%，-50%）； 转换：翻译（-50%，-50%）； }

您可以尝试以下方法：

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;
}

#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>

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

---

您也可以使用

背景大小：封面

将其设置为背景。像这样：

.img1、.img2{
高度：400px；
宽度：300px；
背景图片：url(http://placehold.it/350x150);
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
显示：内联块；
}
.img2{
宽度：500px；
高度：400px；
}

---

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

使用

transform:translateX（-50）

来管理这一点（但CSS3），无论是大屏幕还是小屏幕，图像都将始终保持在中心，并保持其比例纵横比

---

否则，如果您想要更跨浏览器的内容，您可能需要一点javascript，但我可能错了。

您不能将英雄图像设置为背景吗？这将允许在定位和图像大小方面具有更大的灵活性

<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;
}

.英雄形象{
宽度：100%；
高度：400px；
背景重复：无重复；
背景位置：50%50%；
背景尺寸：封面；
}

这就实现了你计划要做的事情。这种方法还有其他好处，例如，响应图像

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

---

注意：如果不需要CMS驱动，您可以简单地将映像应用于类，而不是将其内联。

不清楚您想要实现什么。请尝试指定betterHi，这也是我得到的解决方案，但如果将浏览器缩放到狭窄的视口，您会注意到它开始扭曲图像。有什么想法吗？是的…只是使用媒体查询。嗨，我不能使用背景图像，因为图像是通过动态方式从Wordpress中提取的。谢谢但是你能使用内联风格吗？嗨@lateek35。这太棒了，非常感谢你的帮助，这正是我想要的！