Question

我有一个3列流体布局，每列％宽度左列和右列内容只是图像，当浏览器大小更改时，可以根据需要按比例放大/缩小。

在中间栏中，我有一个带有背景图像的标题区域，徽标图像和文本图像位于背景图像的顶部。

背景图片，徽标和文字图片都会随着浏览器调整大小而缩放，但不会相互成比例。

也就是说，当浏览器尺寸减小时，徽标变得比背景图像更快，因此不再与背景图像成比例。结果，徽标图像在背景图像上变得很小。

你可以看到它在这里工作： http://jsfiddle.net/james2014/KSq5j/embedded/result/

如果你慢慢调整浏览器的大小，你可以看到所有图像都开始按比例缩小，但是徽标（带有＆＃34的绿色东西;其中的＃34;）对于蓝色背景来说变得太小了，文本也是如此

JSFiddle中的代码： http://jsfiddle.net/james2014/KSq5j/

蓝色渐变背景图片很大（2000 + px），可以放大可能的大屏幕，填充中心区域的宽度，但我认为这可能会破坏缩放比例。

我已经尝试了几天不同的CSS，背景大小，不同的宽度和图像大小。任何人都可以建议CSS中可能需要什么？我考虑采用一种新的方法，如果没有背景图像那么大，如果有解决方案也是如此。

这里是代码： HTML

<!DOCTYPE html>
<html>
  <head>
    <title>3 column responsive</title>
    <link rel='stylesheet' type='text/css' href='style.css'>
  </head>
<body>

<!-- MASTER LEFT COLUMN -->
<div id="master-column-left">
  <img src="http://s27.postimg.org/umuoxsb6b/site_left_image.png">
</div>


<!-- MASTER CENTRE COLUMN -->
<div id="master-column-centre">

  <!-- Header -->
  <div id="header-centre">

    <!-- Logo -->
    <div id="main-top-logo">
      <img src="http://s27.postimg.org/40i88t6z3/logo.png">
    </div>

    <!-- Some Text -->
    <div id="some-text">
      <img src="http://s27.postimg.org/a05zcgrrj/some_text.png">
    </div>

    <div style="clear-both"></div>

  </div>
  <!-- end Header -->

</div>
<!-- end MASTER LEFT COLUMN -->


<!-- MASTER COLUMN RIGHT -->
<div id="master-column-right">
  <img src="http://s27.postimg.org/68weq5e37/site_right_image.png">
</div>

<div class="clear-both"></div>

</body>
</html>

CSS

body
  {
    margin: 0; padding: 0;
  }

img { max-width: 100%; height: auto; }

/** COLUMN WRAPS **/
#master-column-left
  {
    width: 20%;
    float: left;
  }
#master-column-centre
  {
    width: 59.5%;
    float: left;
  }
#master-column-right
  {
    width: 20%;
    float: left;
  }

/** HEADER **/
#header-centre
  {
    float: left;
    width: 100%;
    padding: 0 0 1.3em 0;
    background-image: url('http://s27.postimg.org/guga25ker/content_header_image.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-top: 1px solid #4c6623;
  }

/** LOGO **/
#main-top-logo
  {
    float: left;
    width: 10%;
    margin: 1.3em 0 0 2em;
  }
/** TEXT **/
#some-text
  {
    float: left;
    margin: 2.3em 0 0 9em;
    width: 28%;
  }

Answer 1

我已经使用jQuery在这个更新的FIDDLE中保持高度一致。

但我不确定它是否真的最佳。

我想知道你是否可以将所有三个顶级项目放在一个div中，然后在它们下方放置三列。这是我能想到的唯一方法。

编辑：如果您将中心标题设为图像，则可以将其视为与其他两个图像相同的方式。

我相信其他人会提出一些更好的想法。

JS

var bikeheight = 0;
bikeheight = $('#master-column-left img').height();
$('#header-centre').css('height', bikeheight-22);

$(window).resize(function(){
  bikeheight = $('#master-column-left img').height();
  $('.putmehere').html(bikeheight);
  $('#header-centre').css('height', bikeheight-22);
});

编辑2：我们可能有一个基于这个优秀页面的解决方案： http://www.mademyday.de/css-height-equals-width-with-pure-css.html

这是FIDDLE。

Answer 2

对于其他任何以类似问题到此结束的人。

TimSPQR的答案非常有用，给人深思，当然可以解决他人的问题。

但是我发现我的代码问题特别是标题背景图片和徽标容器上的填充没有与图像的缩放大小成比例缩放。

即使填充是em，并且理想情况下应该根据需要进行缩放，但事实并非如此将填充更改为百分比（％），当然还有值，解决了我的头痛。

响应式设计 - 图像不按比例缩放

2 个答案: