【发布时间】：2015-09-26 02:58:58
【问题描述】：
我熟悉响应式设计的大多数概念。然而，网格和排水沟让我摸不着头脑（我发现的大多数解决方案都感觉很“笨拙”）。但是这个。这个。正在弯曲我的大脑。
我想创建一个图像网格。它将具有最大尺寸，但是当调整视口大小时，所有图像都会和谐地缩小。这样一来，一切都将保持正确的比例（在本例中都是完全正方形）。
现在我认为这可能是可能的，如果我声明一个固定的高度，但那肯定是完全没有响应的。例如，我创建了一个快速的（而且非常糟糕......但这就是我在这里的原因！）mock-up 这可能会如何......[我要说工作]。
<style>
body ,
html {
height:100%;
}
* {
box-sizing:border-box;
}
.main-image {
float:left;
width:66%;
height:200px;
}
.alt-images {
float:right;
width:33%;
height:200px;
}
.main-image div {
height:100%;
width:100%;
background-color:grey;
padding:5px;
}
.alt-images div {
height:33%;
width:100%;
padding:5px;
}
.one {
background-color:red;
}
.two {
background-color:blue;
}
.three {
background-color:green;
}
</style>
<div>
<div class="main-image">
<div></div>
</div>
<div class="alt-images">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
这就是重点。是的，这是一个不好的例子。我很快把它放在一起。但老实说，我真的很难找到一个可行的解决方案。我没有尝试过任何工作。
我真正感兴趣的是这里。而不是你们在那里拆开我的伪劣代码。 是解决这个问题的最佳方法。例如，它是仅 CSS 的解决方案，还是我会发现使用 Javascript 更轻松。我也在我的项目中使用 jQuery Masonry，并且做了一些研究，我认为 Isotope 可能会提供一些解决方案，但我宁愿不要在商业项目中使用它是有成本的。
还有什么。当页面进一步缩小并且空间变得更加有限时。布局将翻转，看起来像这样：
我想我要爆破血管了！
帮助。
站点范围的框架（Twitter Bootstrap 等）不是一个选项。该项目已经启动。不过，我对 jQuery 插件持开放态度，并且我正在使用 LESS 和一些非常基本的 mixin 来创建网格。
您将如何解决这个问题？真的像我想象的那么难吗？
编辑：忘了说它必须在 IE9（其中不支持 flexbox 等）及更高版本中工作。
谢谢
【问题讨论】：