具有不同图像尺寸的CSS的图库集块？

Question

我试图用CSS实现以下布局。这是布局快照：

https://archive.org/details/Untitled1_20161122

没有砖石，因为砌砖是不可能的（行/柱宽/高度都改变了，而砖石不是这种情况，但我可能错了）。有一个很好的纯CSS解决方案。非常感谢。我一直在寻找CSS解决方案。例如，www.bata.com在他们的主页上有相似的结果，如果这有助于解释目的，并且就我而言没有砌筑。

这是我的代码：

.gallery {
				width: 70%;
				margin: 0 auto;
				background: crimson;
				position: relative;
			}
			.col-20 {
				width: 20%;
				float: left;
				/*border: 1px solid red;*/
			}
			.col-40 {
				width: 40%;
				float: left;
				/*border: 1px solid red;*/
			}
			.col-60 {
				width: 60%;
				float: left;
				/*border: 1px solid red;*/
			}
			div {
				overflow: hidden;
			}
			img {
				width: 100%;
				height: auto;
			}

<div class="gallery">
        	<div class="col-40">
        		<img src="1.png" alt="">
        	</div>
        	<div class="col-20">
        		<img src="2.jpg" alt="">
        	</div>
        	<div class="col-20">
        		<img src="3.jpg" alt="">
        	</div>
        	<div class="col-20">
        		<img src="4.png" alt="">
        	</div>
        	<div class="col-20">
        		<img src="2.jpg" alt="">
        	</div>
        	<div class="col-20">
        		<img src="3.jpg" alt="">
        	</div>
        </div>

提前谢谢。

Answer 1

如果您对静态布局没问题，可以使用具有固定布局且没有边框的表格。

https://css-tricks.com/fixing-tables-long-strings/

使用background-size: cover;

将图像设置为表格的背景

然后使用width，colspan和rowspan，在桌面上创建一个固定的布局。