Css 带有侧边栏和响应图像和文本的两列布局

我有一个包含两列的布局：一个左侧边栏和一个主要内容。 侧边栏占总数的25%（主边栏占75%！）。 在主内容区中，应有6个区域的图像（每个区域的宽度为整个版面宽度的25%）

布局必须流畅/灵敏。 我的问题是，很明显，当视口不是全宽时，图像会调整大小。但是

• 侧边栏的高度不跟随图像高度调整大小。 目前，我已经设置了一个绝对定位图像。我还没有将其正确设置为（响应）背景图像。侧边栏块高度明显错误（设置为图像高度/2），但我不知道如何设置响应高度（自动或50%）
• 块中的文本不会“跟随”图像大小调整

我怎样才能做到这一点？我希望解决方案对IE8+有效。我知道，我要求太多了

我做了一个来展示这个原理（目前这里没有断点）

第一集团的内容
集团2的内容
集团3的内容
集团4的内容
第5集团的内容
第6集团的内容
一些内容
一些内容
一些页脚内容

我正在开发Wordpress子模板

-----编辑- 由于“真实”图像将是真实的人的图片（在jpg中过度使用彩色网格-我不是图形绘制者：（）），因此它将不是一个选项

图像将是响应性的：没有变形，但大小一致。 我想让边栏响应图像的高度（一个图像，而不是重复的一个），边栏的两个部分（相等高度）中的每一个，调整大小以保持与图像上的网格对齐

---

事实上，我的小提琴是有问题的，因为默认的视口很小：我想要一个响应版本，其结果“总是”像视口完全拉伸时一样。

为了保持图像的纵横比，我们需要设置每个边栏的高度以匹配响应图像的高度。我在这里使用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'
});

然后，我们结合ready（）+resize（）函数，整个脚本是：

$(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 */}

编辑

唯一的图像应该覆盖整个内容区域（两行）

$(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'
    });
}

$(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'
    });
}