响应式设计 - 图像未按比例缩放答案

【问题标题】：Responsive design - images not scaling proportionately响应式设计 - 图像未按比例缩放
【发布时间】：2014-05-27 10:54:08
【问题描述】：

我有一个 3 列的流畅布局，每列 % 宽度。
左右栏内容只是图片，当浏览器大小改变时，可以根据需要放大/缩小。

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

背景图片、徽标和文本图片都会随着浏览器调整大小而缩放，但彼此之间不成比例。

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

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

如果您慢慢调整浏览器的大小，您会看到所有图像都开始缩小，但徽标（带有“whatever”的绿色）对于蓝色背景来说变得太小了，文字也是如此。

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%;
  }

【问题讨论】：

标签： html css responsive-design fluid-layout

【解决方案1】：

对于遇到类似问题的其他人。

TimSPQR 的回答非常有帮助，令人深思，当然可以解决其他人的问题。

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

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

【讨论】：

【解决方案2】：

我使用 jQuery 来保持更新后的FIDDLE 中的高度相同。

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

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

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

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

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。

【讨论】：

嘿蒂姆，感谢您的关注和想法。 JQuery 是正确的，徽标保持相同大小。 Tho header img 是全尺寸的，我不想从 JQuery 开始（不了解它）。您确实想到了一个好主意，将中心标题制作为一张图片。我玩弄了它，但真的想要单独的图像（显而易见的原因）。尽管这变得比必要的更复杂，所以我可能会考虑 if 使用mademyday 链接中的代码不起作用的想法。需要一点时间来玩弄它。再次感谢。