1

我正在尝试设置一个网格布局，上面有图像object-fit: cover，但这似乎在网格布局上设置了一个最小高度。这是故意的，还是我做错了什么？

这是我的标记：

<div class="test">
  <div class="item">
    <img class="cover" src="https://images.unsplash.com/photo-1555932339-5d13d6a9ae5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" />
  </div>
  <div class="item">
    <img class="cover" src="https://images.unsplash.com/photo-1555932339-5d13d6a9ae5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" />
  </div>
  <div class="item">
    <img class="cover" src="https://images.unsplash.com/photo-1555932339-5d13d6a9ae5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" />
  </div>
  <div class="item">
    <img class="cover" src="https://images.unsplash.com/photo-1555932339-5d13d6a9ae5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" />
  </div>
  <div class="item">
    <img class="cover" src="https://images.unsplash.com/photo-1555932339-5d13d6a9ae5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" />
  </div>
</div>

和造型：

.test {
    display: grid;
    grid-template-columns: [main] 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    height: 330px;
    width: 500px;
    margin-bottom: 30px;
    grid-template-areas: "main . ." "main . .";
}

.item {
  width: 100%; height: 100%;
  &:first-child {
    grid-area: main;
  }
}

.cover {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

如果我在.test网格容器上低于 170px 高度，它不会缩小。如果我切换到background-image在.itemdiv 上使用并删除<img/>，它工作正常。虽然我不想这样做，但我需要图像标签才能正确标记。

这是在 codepen 上运行的代码

4

0 回答 0