使CSS网格单元格图像项使用所有可用空间

时间：2018-10-27 12:26:04

标签： html css css-tables css-grid

我正在制作带有标题的CSS CSS网格，我希望图像显示尽可能大，而标题占用的空间则尽可能小。

我希望标题行变窄而图像行变深，而不是所有行的大小都与我的代码相同。 

+---------+---------+---------+---------+
| caption | caption | caption | caption |
+---------+---------+---------+---------+
|  image  |  image  |  image  |  image  |
|  image  |  image  |  image  |  image  |
|  image  |  image  |  image  |  image  |
|  image  |  image  |  image  |  image  |
|  image  |  image  |  image  |  image  |
+---------+---------+---------+---------+

我的解决方案显示标题的行和图像的行在相同的高度，而不是使图像的行尽可能大，并使用对象适配来防止图像的长宽比受到损害

我已经将代码放入了一个https://codepen.io/charlbury/pen/RedWWB?editors=1100的代码笔中。

CSS：

.WHR-visualiser {
  display: flex;
  width: 660px;
  height: 328PX;
}

.left {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 5px;
  width: 100%;
  height: 100%;
}

.caption {
  font-size: 0.6em;
  text-align: center;
}

.left>div img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

HTML：

<h1>Header:</h1>
<div class="WHR-visualiser">
  <div class="left">
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate with a longer name than the others</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>

    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/ea5762e7-b1a3-416d-89a6-16f934d44867.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a112a543-9917-400a-a021-f9430e2d594a.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/5a368d6d-2df6-40b7-b1fc-5a5725bef99a.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/05c160f9-06b3-4f6b-bbff-6aad7ff923b0.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/dbd0fb84-b4ff-4404-be39-cf7aa6329916.jpg" />
    </div>

    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>

    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/dbd0fb84-b4ff-4404-be39-cf7aa6329916.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/05c160f9-06b3-4f6b-bbff-6aad7ff923b0.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/5a368d6d-2df6-40b7-b1fc-5a5725bef99a.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a112a543-9917-400a-a021-f9430e2d594a.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/ea5762e7-b1a3-416d-89a6-16f934d44867.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" />
    </div>

    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>

    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/05c160f9-06b3-4f6b-bbff-6aad7ff923b0.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/05c160f9-06b3-4f6b-bbff-6aad7ff923b0.jpg" />
    </div>

  </div>
</div>

<h1>Footer:</h1>

1 个答案:

答案 0 :(得分：0)

只需将图像宽度的100％添加到相同大小的所有图像上

.WHR-visualiser {
  display: flex;
  width: 660px;
  height: 328PX;
}

.left {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 5px;
  width: 100%;
  height: 100%;
}

.caption {
  font-size: 0.6em;
  text-align: center;
}

.left>div img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 4px;
  width:100% ;
}
<h1>Header:</h1>
<div class="WHR-visualiser">
  <div class="left">
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate with a longer name than the others</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>

    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/ea5762e7-b1a3-416d-89a6-16f934d44867.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a112a543-9917-400a-a021-f9430e2d594a.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/5a368d6d-2df6-40b7-b1fc-5a5725bef99a.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/05c160f9-06b3-4f6b-bbff-6aad7ff923b0.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/dbd0fb84-b4ff-4404-be39-cf7aa6329916.jpg" />
    </div>

    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>

    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/dbd0fb84-b4ff-4404-be39-cf7aa6329916.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/05c160f9-06b3-4f6b-bbff-6aad7ff923b0.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/5a368d6d-2df6-40b7-b1fc-5a5725bef99a.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a112a543-9917-400a-a021-f9430e2d594a.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/ea5762e7-b1a3-416d-89a6-16f934d44867.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" />
    </div>

    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>
    <div class="caption">1. Brandenburg Gate</div>

    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/a98f6e81-2327-4e2f-94b6-63bc90494884.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/05c160f9-06b3-4f6b-bbff-6aad7ff923b0.jpg" />
    </div>
    <div><img src="https://s3.eu-west-2.amazonaws.com/aigaming/WhereIsWhere/Games/8e962ec7-5fb9-404a-b393-0a138cd78aab/05c160f9-06b3-4f6b-bbff-6aad7ff923b0.jpg" />
    </div>

  </div>
</div>

<h1>Footer:</h1>

相关问题
最新问题