css - 全宽横幅超过 1400 像素时需要居中

Question

我的问题的简短版本:当 > 1400px 并且不在顶部对齐时使图像水平居中(参见 fiddle )

在我的网站上，我有一张 1400x450 像素的图像，并且始终触及两侧(全宽)。当我将浏览器缩小 < 1400px 时，它总是以该 div 为中心并保持为 1400x450。当浏览器大于 1400px 时，图像需要缩放到全宽。这一切都有效。

但现在我的问题是:当我的浏览器大到 1400px 时，图像需要水平居中到不能高到 500px 的 div 中。因此，当图像的高度变大到 520px 时，它需要缩放到 div 中并保持水平居中( overflow hidden )。

这一切都有效，但当图像高度达到 520 像素时，它不会居中。

如果您看到我的示例，您会更清楚我的意思。 (并且有一个大屏幕)

全屏: 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;}
}