Question

我正在尝试将img置于包含div的{{1}}中，其中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

Answer 1

使用transform:translateX(-50)来管理此（但是CSS3），大屏幕或小屏幕，图像将始终保持居中并保持其比率方面。

Here the fiddle

否则，如果您想要更多跨浏览器，您可能需要一些javascript，但我可能错了。

Answer 2

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

＆＃13;

#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%);
}

＆＃13;

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

＆＃13;

Answer 3

你能否将英雄形象设为背景？这将使定位和图像尺寸更加灵活。

<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为div-class of hero-image中的任何背景图像设置属性。您需要做的就是内联背景图像本身。

注意：如果这不是必须由CMS驱动的，您只需将图像应用于类而不是内联。

Answer 4

你可以试试这个：

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

Answer 5

您也可以将其设置为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>

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

当填充100％宽度和高度时，在div内居中图像

5 个答案: