html - 如何在不激活水平滚动条的情况下将图像放置在包装器周围

Question

我在居中的固定宽度容器(包装器)内有一个网页，需要以某种方式在周围(从包装器的左侧和右侧)放置背景图像，如下图所示:

重要的是，如果浏览器窗口太小而无法显示整个背景图像，则不要激活水平滚动条，而应该隐藏两侧的部分图像。

我当前的包装器是这样定义的(但如果需要可以更改它):

.wrapper { width:1000px; margin:0 auto;}

我在很多网站上都看到过，有什么不疯狂的方法可以实现吗？

Answer 1

根据我的理解，我认为响应能力在这里对您来说非常关键。为什么不考虑使用两个绝对定位的 div？您也可以利用 background-image:cover 轻松地使它们完全响应。

参见 fiddle : http://jsfiddle.net/jsn3gpLn/1/

HTML:

<div class="images">
    <div class="container">
    </div>
</div>

CSS:

.images {
    position: absolute;
    width: 100%;
    height: 100%;
    background: blue;
    padding: 0;
    margin: 0;
    background-image: url('http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg');
    background-size: contain;
    background-position: center; 
    background-repeat: no-repeat; 
}

.container {
    width: 80%;
    height: 80%;
    position: absolute;
    padding: 0;
    margin: 0;
    background: red;
    left: 10%;
    top: 10%;
}