响应式Flexbox图像网格

Question

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

示例：

＆＃13;

＆＃13;

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

 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是你正在尝试将不同宽高比的图像放入相同大小的盒子中（我说图像因为它看起来也是你的第一个前两个图像底部有1个像素的间隙。）

您的选择是：

在CMS端将所有图像裁剪为相同尺寸。

或

将图像附加为内嵌背景图像，并在CSS文件中将background-size设置为cover，将background-position设置为center center。还需要调整其他一些事情。如果您对此方法感兴趣，请在评论中告诉我，我可以使用代码段编辑我的答案。

修改

背景图片（为了简洁起见，我只做了一个）：

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