控制 CSS 网格布局中图像的大小

Question

我有一个带有一堆区域和一个照片容器的 CSS 网格布局。

我不知道如何：

1. 控制照片的大小，使其包含在网格区域内

2. 将照片的宽度保持在 100%（因此等于其容器）并缩放容器的高度以适合照片。基本上，当窗口变小时，照片的宽度会变小，高度也会变小 - 向上拉标签、相册和旋转元素。

 .container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 40vh 30vh 30vh;
  grid-gap: 10px;
  grid-template-areas:
    "info    photo photo photo   photo"
    "comment photo photo photo   photo"
    "comment tag     tag   album rotate"
}

.photo {
  grid-area: photo;
  background: yellow;
}

.photo>img {
  object-fit: cover;
  width: 100%
}

.info {
  grid-area: info;
  background: pink;
}

.tag {
  grid-area: tag;
  background: teal;
}

.comment {
  grid-area: comment;
  background: green;
}

.album {
  grid-area: album;
  background: red;
}

.rotate {
  grid-area: rotate;
  background: blue;
}

 <div class="container">
  <div class="photo">
    <img src="http://wallpaper-gallery.net/images/image/image-13.jpg" />
  </div>
  <div class="info">info</div>
  <div class="tag">tag</div>
  <div class="comment">comment</div>
  <div class="album">album</div>
  <div class="rotate">rotate</div>
</div>

原文由 martin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你在这里有两个不同的问题。

我将解决第一个问题，即在其容器中包含图像。你几乎拥有它。

你的代码：

 .photo > img {
  object-fit: cover;
  width: 100%;
}

您只需要在图像上指定最大高度，这样它就不会溢出容器：

 .photo > img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

JSFiddle 演示

---

第二个问题是缩放图像容器的大小，当图像变小时将下面的网格项向上拖动，明显更复杂。

这不是与图像有关的问题。实际上，您可以在尝试解决此问题时完全删除图像。

这是一个动态调整网格项目（图像容器）大小的问题。当它的大小由 grid-template-columns 和 grid-template-rows 控制时，为什么这个网格项会改变与图像大小相关的大小？

此外，为什么网格项目的底行（ tag ， album ， rotate ）会跟随图像容器向上或向下？他们将不得不退出他们的行。

缩放整个网格容器不会有问题。但似乎您只想缩放一个网格项（图像容器）。这很棘手。您可能正在查看其他容器， auto 长度值，可能还有脚本。

如果您为图像行提供 auto 值，会发生以下情况： JSFiddle 演示

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议