響應式Flexbox圖像網格

Question

我無法讓我的一張圖像正確排列。我已經完成了大部分對齊vertical-align: middle;和顯示display: block;選項來刪除底部填充。我還將容器設置爲width: 100%;以及圖像width: 100%;，因此它應該是響應式的。我不確定是什麼原因導致這張圖片存在差距。我已將背景顏色設置爲黃色，以顯示需要填充的區域。我還評論了我嘗試的所有替代選項，但都沒有成功。

例子：

* { 
 
    box-sizing: border-box; 
 
    font-size: 100%; 
 
} 
 
    
 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    max-width: 90%; 
 
    margin: 0 auto; 
 
    background-color: white; 
 
} 
 
    
 
.img__container { 
 
    display: flex; 
 
/* justify-content: space-between; */ 
 
    align-content: center; 
 
    background: yellow; 
 
} 
 
    
 
a .img_item { 
 
    width: 100%; 
 
    height: auto; 
 
    vertical-align: middle; 
 
/* display: block; */ 
 
/*  flex-grow: 1; 
 
    flex-shrink: 0; 
 
    flex-basis: auto; */ 
 
} 
 
    
 
.img_item_1, 
 
.img_item_3, 
 
.img_item_2 { 
 
    width: 33.33%; 
 
} 
 
    
 
.img_item_4, 
 
.img_item_5 { 
 
    width: 50%; 
 
} 
 
    
 
.img_item img { 
 
    vertical-align: middle; 
 
/* display: block; */ 
 
    max-width: 100%; 
 

 
}

<div class="container"> 
 

 
    <div class="img__container"> 
 
    <a href="#" class="img_item img_item_1"><img src="https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b" alt=""></a> 
 
    <a href="#" class="img_item img_item_2"><img src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5" alt=""></a> 
 
    <a href="#" class="img_item img_item_3"><img src="https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a" alt=""></a> 
 
    </div> 
 
    <div class="img__container"> 
 
    <a href="#" class="img_item img_item_4"><img src="https://images.unsplash.com/photo-1428189923803-e9801d464d76?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=467ee7b8a091aa5cb8bc9b496aada853" alt=""></a> 
 
    <a href="#" class="img_item img_item_5"><img src="https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d" alt=""></a> 
 
    </div> 
 
    <div class="img__container"> 
 
    <a href="#" class="img_item img_item_6"><img src="https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1" alt=""></a> 
 
    <a href="#" class="img_item img_item_7"><img src="https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9" alt=""></a> 
 
    </div> 
 
</div>

Answer 1

問題是你想以適應不同寬高比的圖像轉換成相同大小的盒子（我說的圖像，因爲它也出現在第一頂部的兩個圖像具有位於底部的1個像素的間隙）

的選項有：

鉻在CMS末尾將所有圖像放到相同尺寸。

或

附上您的圖像作爲內嵌背景圖像和CSS文件中設置background-size到cover和background-position到center center。您還需要調整其他一些內容。如果您對此方法感興趣，請在評論中告訴我，我可以使用代碼段編輯我的答案。

EDIT

背景圖像（爲了簡潔起見，我僅做了一個）：

* { 
 
    box-sizing: border-box; 
 
    font-size: 100%; 
 
} 
 
    
 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    max-width: 90%; 
 
    margin: 0 auto; 
 
    background-color: white; 
 
} 
 
    
 
.img__container { 
 
    display: flex; 
 
    align-content: center; 
 
    background: yellow; 
 
} 
 

 
.img_item { 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 
    
 
.img_item_4, 
 
.img_item_5 { 
 
    width: 50%; 
 
} 
 
    
 
.img_item img { 
 
    vertical-align: middle; 
 
    max-width: 100%; 
 

 
}

<div class="container"> 
 

 
    <div class="img__container"> 
 
    <a href="#" class="img_item img_item_1"><img src="https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b" alt=""></a> 
 
    <a href="#" class="img_item img_item_2"><img src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5" alt=""></a> 
 
    <a href="#" class="img_item img_item_3"><img src="https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a" alt=""></a> 
 
    </div> 
 
    <div class="img__container"> 
 
    <a href="#" class="img_item img_item_4" style="background-image:url(https://images.unsplash.com/photo-1428189923803-e9801d464d76?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=467ee7b8a091aa5cb8bc9b496aada853);"></a> 
 
    <a href="#" class="img_item img_item_5"><img src="https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d" alt=""></a> 
 
    </div> 
 
    <div class="img__container"> 
 
    <a href="#" class="img_item img_item_6"><img src="https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1" alt=""></a> 
 
    <a href="#" class="img_item img_item_7"><img src="https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9" alt=""></a> 
 
    </div> 
 
</div>

編輯2

* { 
 
    box-sizing: border-box; 
 
    font-size: 100%; 
 
} 
 
    
 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    max-width: 90%; 
 
    margin: 0 auto; 
 
    background-color: white; 
 
} 
 
    
 
.img__container { 
 
    display: flex; 
 
    align-content: center; 
 
    background: yellow; 
 
} 
 

 
.img_item { 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
.img_item_1, 
 
.img_item_2, 
 
.img_item_3 { 
 
    padding-bottom: 22%; 
 
    width: 33.333%; 
 
} 
 
    
 
.img_item_4, 
 
.img_item_5, 
 
.img_item_6, 
 
.img_item_7 { 
 
    padding-bottom: 33.333%; 
 
    width: 50%; 
 
} 
 
    
 
.img_item img { 
 
    vertical-align: middle; 
 
    max-width: 100%; 
 

 
}

<div class="container"> 
 

 
    <div class="img__container"> 
 
    <a href="#" class="img_item img_item_1" style="background-image:url(https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b);"></a> 
 
    <a href="#" class="img_item img_item_2" style="background-image:url(https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5);"></a> 
 
    <a href="#" class="img_item img_item_3" style="background-image:url(https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a);"></a> 
 
    </div> 
 
    <div class="img__container"> 
 
    <a href="#" class="img_item img_item_4" style="background-image:url(https://images.unsplash.com/photo-1428189923803-e9801d464d76?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=467ee7b8a091aa5cb8bc9b496aada853);"></a> 
 
    <a href="#" class="img_item img_item_5" style="background-image:url(https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d);"></a> 
 
    </div> 
 
    <div class="img__container"> 
 
    <a href="#" class="img_item img_item_6" style="background-image:url(https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1);"></a> 
 
    <a href="#" class="img_item img_item_7" style="background-image:url(https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9);"></a> 
 
    </div> 
 
</div>