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

Question

我有一个 CSS 网格布局，其中包含一些区域和一个照片容器。

我不知道如何：

控制照片的大小，使其包含在网格区域内
将照片的宽度保持在 100%（因此等于其容器）并缩放容器的高度以适合照片。基本上，当window变小时，照片的宽度变小，高度也变小-拉动标签、相册和旋转元素。

.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

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

Answer 2

这里有两个不同的问题。

我将解决第一个问题，即在其容器中包含图像。你差一点就成功了。

您的代码：

.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 3

如果您在其中一个网格单元格中使用 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 4

我有一个轻微的修正，适用于 css-grid cell 和 src img。（因为接受的解决方案仅在单元格的纵横比大于比图像的纵横比时才有效）。很简单:

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

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

Controlling the size of an image within a CSS Grid layout

html

css

css-grid