在流體網格的邊緣顯示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％寬的圖像？

回答

相關問題