Question

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

我不知道如何：

控制照片的大小，使其包含在网格区域内
将照片的宽度保持在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

如果你在其中一个网格单元格中使用背景图像而不是IMG标记怎么办（如果没有使用display：grid b / c那么它很新 - 很酷！）

然后使用背景大小和背景位置，您可以在该单元格内正确调整大小。

.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网格单元格 和 src img 的纵横比的任何组合。（因为公认的解决方案只有在单元格的长宽比大于图片的长宽比时才有效）。很简单：

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

Answer 4

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

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

4 个答案: