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

【问题标题】：Two column layout with sidebar and responsive image and text带有侧边栏和响应式图像和文本的两列布局
【发布时间】：2015-10-15 22:33:48
【问题描述】：

我有一个包含 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 子模板

----- 编辑 - 由于“真实”图像将是人的真实照片（在 jpg 中叠加了彩色网格 - 我不是图形学家 :( ），所以它不是一个选项。

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

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

【问题讨论】：

标签： css wordpress responsive-design

【解决方案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'
});

然后，我们结合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 */}

jsfiddle

编辑

唯一的图像应覆盖整个内容区域（两行）。根据需要进行最少的 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

【讨论】：