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儿童模板

-----编辑 - 由于“真实”的图像将是人们的实际图片（彩色网格过度插入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'
});

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

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

1 个答案: