子网格布局的问题不是 100% 高度

Question

由于某种原因，我无法使图像 100% 高，它看起来像一个填充底部，我尝试了所有方法，但找不到错误的地方： 我不知道问题出在我的网格布局已完成 用我的 img 标签表示什么 代码

JSX：

 <GallerySection>
      <Container>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            paddingBottom: "20px"
          }}
        >
          <FontAwesomeIcon
            className="adjust"
            icon={faNewspaper}
            size="2x"
            fixedWidth
            color="#fff"
          />
          <h3>Galeria de Fotos</h3>
        </div>
        <div className="grid_gallery">
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div className="bg">
              <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg" />
            </div>
          </div>
          <div class="gallery_item">
            <div class="description">
              <p>Lorem ipsum dolor sit amet</p>
            </div>
          </div>
          <div class="gallery_item">
            <div class="description">
              <p>Lorem ipsum dolor sit amet</p>
            </div>
          </div>
          <div class="gallery_item">
            <div class="description">
              <p>Lorem ipsum dolor sit amet</p>
            </div>
          </div>
        </div>
      </Container>
    </GallerySection>

JS 中的 CSS：

export const GallerySection = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  outline: none;
  background: #004fff;
  position: relative;
  padding: 64px 0;
  clip-path: polygon(0 0, 100% 2vw, 100% calc(100% - 2vw), 0 100%);
  h3 {
    padding-left: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    font-weight: 700;
    outline: none;
    color: #fff;
  }
  & .bg {
    height: 100%;
    border: 1px solid white;
    img {
      width: 100%;
      height: 100%;
    }
  }
  & .grid_gallery {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
  }
  & .description {
    padding: 0 10px;
    color: white;
    border-left: 2px solid #fff;
  }
  & .gallery_item:nth-last-child(-n + 3) {
    grid-column: span 2;
  }
  & .gallery_item:nth-of-type(1),
  & .gallery_item:nth-of-type(2),
  & .gallery_item:nth-of-type(3) {
    grid-column: span 2;
  }
  & .gallery_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
`;

示例：

https://codesandbox.io/s/kind-wind-mso42

图片：

Answer 1

您需要添加一个 display:block 以摆脱“填充”（这是因为默认情况下图像是内联块）：

img {
  display:block;
  width: 100%;
  height: 100%;
}

这解决了问题。