时间戳

首页 > 解决方案 > 如何在css网格中显示图像？

html - 如何在css网格中显示图像？

问题描述

我正在尝试为照片制作一个 css 网格，但 img 元素不会在网格项中显示图像。我使用的 url 没有任何问题，因为它适用于页面的其他部分，但不适用于网格系统。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.wrapper > div img {
  max-width: 100%;
  max-height: 100%;
}
<div id="content">
  <div class="wrapper">
    <div><img src="https://placehold.it/100x100" alt=""></div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
</div>

我究竟做错了什么？

标签： htmlcsscss-grid

解决方案

您可以在包装类中设置图像宽度

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.wrapper > div img {
  max-width: 100%;
}
<div id="content">
  <div class="wrapper">
    <div><img src="https://placehold.it/100x100" alt=""></div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
</div>

推荐阅读