控制 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

Answer 2

如果您在其中一个网格单元格中使用 background-image 而不是 IMG 标记会怎样（还没有使用 display: grid 但 b/c 它是如此新 - 很酷！）

然后使用 background-size 和 background-position，您可以在该单元格内正确调整其大小。

.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;
  height: 100%;
  background-size: cover; /* <-- background size */
  background-position: center; /* <-- background position */
}

.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" style="background-image: url('https://thumbs.web.sapo.io/?epic=YmIzAEUIMb3pue+Zz8qV8QS/WuKmq0vrL/lWiluSn7SstKeeh7/UTTBAuDlhHFD6YC9+vaCHBQuNOXeVaHkjzTSE8tF3hMBev6512ha92Yc4kRw=&W=1200&H=627&crop=center&delay_optim=1')">
  </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 3

我对 css-grid cell 和 src img 的纵横比的任意组合进行了轻微修正。 （因为接受的解决方案仅在单元格的纵横比大于图像的纵横比时才有效）。很简单：

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

Answer 4

您可能需要为图像添加显式宽度：100%