Question

我的问题的简短版本：当＆gt;获得图像水平居中1400px并且没有在顶部对齐（见小提琴）

在我的网站上，我有一张1400x450像素的图像，并且总是触及两侧（全宽）。当我使用我的浏览器＆lt; 1400px它始终集中在该div中并保持1400x450。当浏览器大于1400px时，图像需要缩放到全宽。一切正常。

但现在我的问题：当我的浏览器大于1400px时，图像需要水平居中到div，不能高达500px。因此，当图像的高度变大为520px时，它需要缩放到div并保持居中水平（溢出隐藏）。

这一切都有效，但当图像变得更高时，它不会居中，为520px。

如果你看到我的例子，我的意思会更清楚一点。（并有一个大屏幕）

全屏： http://fiddle.jshell.net/fourroses666/hs8hr0vd/show/

HTML：

<div class="banner">
    <div class="image"><img src="http://placehold.it/1400x450" /></div>
</div>

CSS：

.banner{overflow:hidden; position:relative; height:450px;}
.banner img{min-width:100%; width:1400px; margin-left:-700px; display:block;}
.banner .image{position:absolute; width:100%; left:50%; height:450px; margin:0 auto;}

@media screen and (min-width: 1400px) { 
    .banner{overflow:hidden; height:auto; max-height:520px; position:relative; margin:0; left:auto; width:100%;}
    .banner img{margin:0; display:block;}
    .banner .image{height:auto; left:auto; position:relative;}
}

修改

我的背景图片版本：

<div class="banner">
    <div class="image"></div>
</div>

CSS：

.banner .image{overflow:hidden; position:relative; background-image: url(http://placehold.it/1400x450); background-repeat:no-repeat; background-position:center center; background-size: 100% auto; height:450px;}
.banner{display:block; height:450px;}

@media screen and (max-width: 1400px) { 
    .banner .image{background-size: 1400px 450px;}
}

Answer 1

我的版本带有背景图片：

http://jsfiddle.net/fourroses666/wpdbqsjp/

<div class="banner">
    <div class="image"></div>
</div>

CSS：

.banner .image{overflow:hidden; position:relative; background-image: url(http://placehold.it/1400x450); background-repeat:no-repeat; background-position:center center; background-size: 100% auto; height:450px;}
.banner{display:block; height:450px;}

@media screen and (max-width: 1400px) { 
    .banner .image{background-size: 1400px 450px;}
}

当超过1400px时，全宽度横幅需要居中

修改

1 个答案: