在流体网格的边缘显示100％宽的图像？

与整页拉伸背景想法略有不同，我希望在每个侧边的图像中进行布局，这些边的边缘可以伸展以填充边缘宽度的100％。（因为虽然整页图像对于树叶或某些自然元素的图片可能工作得很好，但以类似方式调整大小的人物照片可能会导致在与内容区域相交的地方切掉人脸。我宁愿让每一面都调整大小）在流体网格的边缘显示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/

来源

2014-02-10 Kristi Simonson

我其实没有在这里看到问题。究竟是什么问题？什么不起作用？ – MElliott

您可能需要展开包含iframe的宽度才能看到会发生什么情况。我应该澄清一点。 –

看看这个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>

来源

2014-02-10 19:00:33 ppollono

在流体网格的边缘显示100％宽的图像？

回答

相关问题