响应式Flexbox图像网格

我无法让我的一张图像正确排列。我已经完成了大部分对齐vertical-align: middle;和显示display: block;选项来删除底部填充。我还将容器设置为width: 100%;以及图像width: 100%;，因此它应该是响应式的。我不确定是什么原因导致这张图片存在差距。我已将背景颜色设置为黄色，以显示需要填充的区域。我还评论了我尝试的所有替代选项，但都没有成功。响应式Flexbox图像网格

例子：

* { 
 
    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>

来源

2016-04-30 Victor

问题是你想以适应不同宽高比的图像转换成相同大小的盒子（我说的图像，因为它也出现在第一顶部的两个图像具有位于底部的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>

来源

2016-04-30 20:11:34

我曾尝试将图像设置为背景图像。我发现调整后的结果有很大的变化。我可能做得不对，请让我知道。我希望图像能够像我目前拥有的那样调整大小。我喜欢在调整页面大小时的样子。例如（背景图像）：http://codepen.io/vaarellano/pen/vGQOvG?editors=1100 – Victor

请看我的编辑:)我没有注意到你所指的运动。为了填充空间，图像必须以某种方式裁剪。 –

感谢您的编辑。当我试图用背景图像更新所有代码并更新CSS为背景大小和背景位置时，图像折叠。你会如何解决这个问题，再次感谢你的帮助，这在过去的6个小时里让我疯狂。 – Victor

响应式Flexbox图像网格

回答

相关问题