响应式图像网格 - 最佳实践和保留比例

Question

我熟悉大多数响应式设计的概念。然而，网格和排水沟让我摸不着头脑（我发现大多数解决方案感觉非常'hacky'）。但是这个。这个。弯曲我的大脑。

我想创建一个图像网格。它将具有最大尺寸，但在调整视口大小时，所有图像将协调缩小。在这样做时，一切都将保持正确的比例（在这个例子中完全正方形）。

现在我认为这可能是有可能的，如果我宣布一个固定的高度，但肯定那么完全没有反应。例如，我创造了一个快速（而且非常糟糕......但这就是为什么我在这里！）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等）及以上版本中工作。

由于

Answer 1

我会将图像作为背景图像作为封面图像，而不是HTML中的内嵌。我认为这是保持图像宽高比同时改变图像宽高比的唯一方法。包含div。

封面背景图片：
https://css-tricks.com/perfect-full-page-background-image/