我有一个 3 列的流体布局，每列 % 宽度。
左右栏内容只是图片，当浏览器大小改变时，图片会根据需要放大/缩小。
在中心栏中，我有一个带背景图片的标题区域， Logo 图片和文本图片位于背景图片的顶部。
背景图像、 Logo 和文本图像都随浏览器大小调整而缩放，但彼此不成比例。
也就是说，当浏览器尺寸缩小时， Logo 比背景图像变小的速度更快，因此不再与背景图像成比例。 结果， Logo 图像在背景图像上变得很小。
你可以看到它在这里工作: http://jsfiddle.net/james2014/KSq5j/embedded/result/
如果您慢慢调整浏览器的大小，您会看到所有图像开始缩小，但 Logo (带有“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%;
}
最佳答案
在这个更新的 FIDDLE 中，我使用 jQuery 来保持高度相同.
但我不确定它是否真的是最优的。
我想知道您是否可以将所有三个顶部元素放在一个 div 中，然后在它们下面放三列。这是我在 CSS 中能想到的唯一方法。
编辑:如果您将中心标题设为图像，则可以像其他两个图像一样对待它。
我相信其他人会提出一些更好的想法。
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 .
关于html - 响应式设计 - 图像不按比例缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23043851/