如何将比屏幕大的图像居中？答案

【问题标题】：How to center image which is bigger than screen?如何将比屏幕大的图像居中？
【发布时间】：2014-10-28 08:04:38
【问题描述】：

我有以下代码：

HTML

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

CSS

.banner > img {
    margin: auto;
}

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

我尝试将横幅图像作为背景图像提供给.banner div，但是 div 不会自动找到它的大小...

这怎么可能？

【问题讨论】：

【解决方案1】：

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

css:

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

像这样：jsfiddle

【讨论】：

【解决方案2】：

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

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

【讨论】：