在流体网格的边缘显示 100% 宽的图像？答案

【问题标题】：Display 100% wide images in the side margins of a fluid grid?在流体网格的边缘显示 100% 宽的图像？
【发布时间】：2014-02-18 18:12:30
【问题描述】：

与整页拉伸背景的想法略有不同，我想在每个侧边距中制作一个带有图像的布局，它会自行拉伸以填充边距宽度的 100%。（因为，虽然整页图像可能适用于树叶或某些自然元素的图片，但以类似方式调整大小的人类照片可能会导致与内容区域相交的面部被切掉。我宁愿让每一面都调整大小独立。）

我尝试让它在 jsfiddle 中工作，但我认为我需要一些更精确的东西。

我目前正在使用 960 网格（不是流畅的或响应式的），并且很快将转向 Bootstrap 3 的响应式布局，因此，如果任何一个都提供自己的方法来处理这个问题，那也很有价值。

.left-image, .right-image{position:relative; width:30%;height:100px;
background-image:url("http://www.craftonhills.edu/~/media/Images/SBCCD/CHC/Layout/book-green.png"); background-repeat: no-repeat;
background-size: 100% auto;
background-origin: content-box}

.left-image{border: 1px solid red; float:left}

.right-image{border: 1px solid green; float:right}

.content{width:200px; margin:0 auto; border: 1px solid black; height:100px;  position:relative}

http://jsfiddle.net/5jBAJ/

【问题讨论】：

我实际上没有在这里看到问题。问题到底是什么？什么不工作？
您可能需要拉伸包含 iframe 的宽度才能看到会发生什么。我应该澄清一下。

标签： css twitter-bootstrap grid

【解决方案1】：

看看这个code

我认为这是解决您问题的方法

CSS

body{
    height: 100%;
    min-height: 500px;
}
.wrapper {
    display: table;
    width: 100%;
    height: 100%;
    min-height: 500px;    
}
.left-image, .right-image {
    position:relative;
    display: table-cell;
    height:100%;
    background-image:url("http://www.craftonhills.edu/~/media/Images/SBCCD/CHC/Layout/book-green.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-origin: content-box
}
.left-image {
    border: 1px solid red;
}
.right-image {
    border: 1px solid green;
}
.content {
    display: table-cell;    
    width:200px;
    margin:0 auto;
    border: 1px solid black;
    height:100%;
    position:relative
}

HTML

<div class="wrapper">
    <div class="left-image">left image</div>
    <div class="content">Content goes here.</div>    
    <div class="right-image">right image</div>
</div>

【讨论】：