网格布局的高度与内容的高度不同。

Question

预览网址：https://asilklife.myshopify.com/?preview_theme_id=132753031414

​

​

图像的大小是800 pxx800px，为什么网格容器的高度总是多6px。

​

<div class="grid-wrapper">
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
</div>


<style type="text/css">
  .grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: red;
  }
  
  .wrapper-item img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
</style>

​

Answer 1

<img>的默认显示值为内联，因此添加display: block;。

​

<div class="grid-wrapper">
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
</div>


<style type="text/css">
  .grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: red;
  }
  
  .wrapper-item img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
</style>

​