如何居中比屏幕更大的图像？

Question

我已经关注了代码：

HTML

<div class="banner">
    <img src="banner.png">
</div>

CSS

.banner > img {
    margin: auto;
}

图像的宽度为3000像素，高度为200像素 我希望图像水平居中，没有水平滚动条。 （浏览器调整大小应该没问题）

我试图将.banner div作为背景图片给予横幅图片，但之后div不会自动找到它的尺寸......

这怎么可能？

Answer 1

您最好的选择是将图像用作背景，但如果您想/需要使用图像，请按照这样做

.banner{overflow:hidden; height:200px; width:100%; text-align:center;}
.banner img{width:100%; height:100%; margin:0 auto;}

Answer 2

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

的CSS：

.banner {
    background: url(http://ximg.es/3000x200/000/fff.png) no-repeat 50% 50%;
    height:200px;
}

像这样：jsfiddle