如何在正方形網格中排列兩種尺寸的圖像？

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>