html - 在 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>

Answer 1

这里有两个不同的问题。

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

您的代码:

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

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

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

JSFiddle demo

---

第二个问题，即缩放图像容器的大小，当图像变小时将下面的网格项向上拖动，要复杂得多。

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

这是动态调整网格元素(图像容器)大小的问题。当此网格项的大小由 grid-template-columns 和 grid-template-rows 控制时，为什么它会根据图像大小更改大小？

此外，为什么最下面一行的网格项(tag、album、rotate)会随着图像容器向上或向下移动？他们将不得不退出他们的行。

缩放整个网格容器不是问题。但似乎您只想缩放一个网格项(图像容器)。这很棘手。您可能正在查看其他容器、auto 长度值以及可能的脚本。

如果您给图像行一个 auto 值，会发生以下情况:JSFiddle demo