帶有側欄和響應式圖像和文本的兩列布局

Question

我有一個包含2列的佈局：左邊欄和主內容。 側欄是總數的25％，（主要是75％！）。 在主要內容區域中應該有一個包含6個區域的圖像（每個圖像寬度的寬度均爲25％）。

佈局必須流暢/響應。 我的問題是，顯然，當視口不是全寬時，圖像被調整大小。但是

• 側邊欄的高度不遵循圖像高度調整大小。 目前，我已經設置了絕對定位的圖像。我無法正確設置它作爲（響應）背景圖像。側欄塊高度顯然是錯誤的（設置爲圖像高度/ 2），但我看不到如何有響應高度（自動或50％的塊中的文本不「跟隨」調整圖像大小

我怎樣才能做到這一點呢？我想解決的有效期爲IE 8+。我知道，我要求的太多了

我已經做了jsfiddle顯示的原則（有這裏沒有斷點，此刻）

<div id="page"> 
    <div id="main"> 
    <div id="main-content"> 
     <div id="primary"> 
     <div id="content"> 
      <img src="http://s18.postimg.org/a8ary6c8p/image.gif" class="bgimg responsiveimg"> 
      <div class="bloc bloc1">Content for bloc 1</div> 
      <div class="bloc bloc2">Content for bloc 2</div> 
      <div class="bloc bloc3">Content for bloc 3</div> 
      <div class="bloc bloc4">Content for bloc 4</div> 
      <div class="bloc bloc5">Content for bloc 5</div> 
      <div class="bloc bloc6">Content for bloc 6</div> 
     </div> 
     </div> 
     <div id="secondary"> 
     <div class="sbloc sec_bloc1">Some content</div> 
     <div class="sbloc sec_bloc2">Some content</div> 
     </div> 
    </div> 
    </div> 
    <div id="footer">Some footer content</div> 
</div> 

我正在WordPress的子模板

-----編輯 - 因爲「真正」的形象將是人實際的圖片（帶overimposed成JPG有色網 - 我不是graphist :(），所以它不會是一個選項。

圖像將響應：不變形，但同調調整大小。 我希望側邊欄對圖像的高度（一個圖像，而不是重複圖像）的高度作出響應，每個側邊欄的兩個部分（高度相等）調整大小以保持與圖像上的網格對齊。

事實上，我的小提琴是可疑的，因爲默認的視口很小：我想要一個響應版本，其結果是「總是」，就像當視口完全拉伸時一樣。

Answer 1

爲了保持圖像寬高比，我們需要設置每個側欄的高度以匹配響應圖像的高度。我在這裏使用jQuery。

var h = $('.bgimg').height(); 
$('.sbloc').css('height', h); 

由於您的複雜佈局1側欄+ 3行文本塊，總共2行。所以容器#content的高度將是圖像高度的2倍。

爲了響應，我們需要將CSS設置爲max-width: 100%; height: auto;的內聯圖像。但我們實際上將其設置爲visibility: hidden;（隱藏，但保留空間），而不是我們使用與背景相同的圖像並將其設置爲contain。

$('.bgimg').css('visibility', 'hidden'); 
$('#content').css({ 
    'height' : h * 2, 
    'background' : 'url(http://s18.postimg.org/a8ary6c8p/image.gif)', 
    'background-size' : 'contain' 
}); 

然後，我們結合就緒（）+調整（）函數，整個腳本是：

$(document).ready(myfunction); 
$(window).on('resize', myfunction); 

function myfunction() { 
    var h = $('.bgimg').height(); 
    $('.sbloc').css('height', h); 
    $('.bgimg').css('visibility', 'hidden'); 
    $('#content').css({ 
     'height' : h * 2, 
     'background' : 'url(http://s18.postimg.org/a8ary6c8p/image.gif)', 
     'background-size' : 'contain' 
    }); 
} 

最後，從塊去除背景顏色，因爲我們使用的背景圖片。

.bloc1, .bloc3, .bloc5{/* background-color: red */} 
.bloc2, .bloc4, .bloc6{/* background-color: green */} 

jsfiddle

EDIT

唯一圖像應覆蓋整個內容區域（兩行）。根據需要更新最小的jQuery代碼。

$(document).ready(myfunction); 
$(window).on('resize', myfunction); 

function myfunction() { 
    var h = $('.bgimg').height(); 
    $('.sbloc').css('height', h/2); 
    $('.bgimg').css('visibility', 'hidden'); 
    $('#content').css({ 
     'height' : h, 
     'background' : 'url(http://s18.postimg.org/a8ary6c8p/image.gif)', 
     'background-size' : 'contain' 
    }); 
} 

jsfiddle