如何在正方形网格中排列两种尺寸的图像？

Question

我想下面用非表CSS的形式给出了工作：

我有解决问题的，是可以对图像大小不同，最高可达512×512，但整个元素应该保持1：1的宽高比。

我试图使所有浮动左图像，并设置

.image { 
    width: 33%; 
    height: 33%; 
} 

除了我设置为width: 66%; height: 66%第一个。

我也试过包装他们div s到使定位更容易：

<div class="all-the-images"> 
    <div class="image-row1"> 
    <div class="image-big"> 
     <div class="image"><img src="http://placehold.it/498x512" /></div> 
    </div> 
    <div class="image-right"> 
     <div class="image"><img src="http://placehold.it/313x313" /></div> 
     <div class="image"><img src="http://placehold.it/498x512" /></div> 
    </div> 
    </div> 
    <div class="image-bottom"> 
    <div class="image"><img src="http://placehold.it/512x234" /></div> 
    <div class="image"><img src="http://placehold.it/234x234" /></div> 
    <div class="image"><img src="http://placehold.it/234x512" /></div> 
    </div> 
</div> 

http://codepen.io/luckydonald/pen/dOwNGX（使用更少）
https://jsfiddle.net/luckydonald/96hqds80/（生成CSS）

但也有不同的图像大小会破坏行。

Answer 1

我还没有彻底测试或抛光，而是使用的table，table-row和table-cell CSS的显示属性是什么？

span { 
 
\t border: 1px solid blue; 
 
}

<div style="width:200px; height: 200px; display: table;"> 
 
<div display="table-row"> 
 
\t <span style="width: 66%; height: 66%; display: table-cell"> 
 
\t \t <img style="width: 100%" src="http://placehold.it/498x512" /> 
 
\t </span> 
 
\t <span style="width: 33%; display: table-cell; vertical-align: top;"> 
 
\t \t <img style="width: 100%;" src="http://placehold.it/512x512" /> 
 
\t \t <img style="width: 100%;" src="http://placehold.it/512x512" /> 
 
\t </span> 
 
</div> 
 
<div display="table-row"> 
 
\t <span style="width: 33%; display: table-cell; vertical-align: top;"> 
 
\t \t <img style="width: 100%;" src="http://placehold.it/512x512" /> 
 
\t </span> 
 
\t <span style="width: 33%; display: table-cell; vertical-align: top;"> 
 
\t \t <img style="width: 100%;" src="http://placehold.it/512x512" /> 
 
\t </span> 
 
\t <span style="width: 33%; display: table-cell; vertical-align: top;"> 
 
\t \t <img style="width: 100%;" src="http://placehold.it/512x512" /> 
 
\t </span> 
 
</div> 
 
</div>

Answer 2

如果你不喜欢表的CSS，你可以这样做太：

<div class="all-the-images"> 
    <div class="image-row1"> 
    <div class="image-big"> 
     <img src="http://placehold.it/498x512" /> 
    </div> 
    <div class="image-right"> 
     <img src="http://placehold.it/313x313" /> 
     <img src="http://placehold.it/498x512" /> 
    </div> 
    </div> 
    <div class="image-row2"> 
    <img src="http://placehold.it/512x234" /> 
    <img src="http://placehold.it/234x234" /> 
    <img src="http://placehold.it/234x512" /> 
    </div> 
</div> 

.all-the-images { 
    height: 300px; 
    width: 300px; 
    background-color: green; 
} 
img { 
    max-width: 100%; 
    max-height: 100%; 
    float: left; 
} 
.all-the-images .image-row1 { 
    height: 66.66666667%; 
} 
.all-the-images .image-row1 .image-big { 
    width: 66.66666667%; 
    height: 100%; 
    float: left; 
} 
.all-the-images .image-row1 .image-right { 
    width: 33%; 
    height: 100%; 
    float: left; 
} 
.all-the-images .image-row2 { 
    height: 33.33333333%; 
} 
.all-the-images .image-row2 img { 
    max-width: 33.33333333%; 
} 

https://jsfiddle.net/arleonard54/yu3Ls4zL/

Answer 3

这里有一个Flexbox的解决方案。仅限IE11 +，除非您使用shim。

.flex-container { 
 
    display: flex; 
 
    background: #eee; 
 
    margin: 0 auto; 
 
    flex: 1; 
 
    width: 100%; 
 
} 
 
.flex-container.vert { 
 
    flex-direction: column; 
 
} 
 
.flex-container.outer { 
 
    width: 30vw; 
 
    height: 30vw; 
 
} 
 
.flex-item { 
 
    background: tomato; 
 
    flex: 1; 
 
} 
 
.flex-item:nth-child(2n) { 
 
    background: pink; 
 
} 
 
.flex-item img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.double { 
 
    flex: 2; 
 
    background: lightgreen; 
 
}

<div class="flex-container outer vert"> 
 
    <div class="flex-container double"> 
 
    <div class="flex-item double"> 
 
     <img src="http://lorempixel.com/800/800/nature/1" /> 
 
    </div> 
 

 
    <div class="flex-container vert"> 
 
     <div class="flex-item"> 
 
     <img src="http://lorempixel.com/800/800/nature/2" /> 
 
     </div> 
 
     <div class="flex-item"> 
 
     <img src="http://lorempixel.com/800/800/nature/3" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="flex-container"> 
 
    <div class="flex-item"> 
 
     <img src="http://lorempixel.com/800/800/nature/4" /> 
 
    </div> 
 
    <div class="flex-item"> 
 
     <img src="http://lorempixel.com/800/800/nature/5" /> 
 
    </div> 
 
    <div class="flex-item"> 
 
     <img src="http://lorempixel.com/800/800/nature/6" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

嘛...不知道，如果你很快回来了这个问题。这就是我使用花车（就像你曾经谈过的那样）。我的图像不符合width: 100%和height: auto的设置。再次，我不确定你想要发生什么样的图像不是完美的正方形（1：1比例）。

.allimages { 
 
    width: 90vw; 
 
    height: 90vw; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    background: #f3f3f3; 
 
} 
 
.image-container { 
 
    display: inline-block; 
 
    float: left; 
 
    height: 33.333%; 
 
    width: 33.333%; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background: #222; 
 
    box-sizing: border-box; 
 
} 
 

 
.image-container.big { 
 
    height: 66.655%; 
 
    width: 66.655%; 
 
} 
 
.image-container img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="allimages"> 
 
    <div class="image-container big"> 
 
    <image src="http://lorempixel.com/700/700/cats"/> 
 
    </div> 
 
    <div class="image-container"> 
 
    <image src="http://lorempixel.com/400/400/sports"/> 
 
    </div> 
 
    <div class="image-container"> 
 
    <image src="http://lorempixel.com/500/500/food"/> 
 
    </div> 
 
    <div class="image-container"> 
 
    <image src="http://lorempixel.com/500/500/sports"/> 
 
    </div> 
 
    <div class="image-container"> 
 
    <image src="http://lorempixel.com/400/400/food"/> 
 
    </div> 
 
    <div class="image-container"> 
 
    <image src="http://lorempixel.com/500/700/sports"/> 
 
    </div> 
 
</div>