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

Controlling the size of an image within a CSS Grid layout

提问by martin

I have a CSS grid layout with a bunch of areas and a photo container.

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

I don't know how to:

我不知道如何：

1. control the size of the photo, so that it is contained within the area of the grid

2. keep the width of the photo at 100% (thus equal to its container) and scale the height of the container to fit the photo. Basically, when the window becomes smaller, the width of the photo becomes smaller, and so does the height - pulling the tag, album, and rotate elements up.

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>

回答by Michael Benjamin

You have two different problems here.

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

I'll address the first one, which is to contain the image in its container. You almost had it.

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

Your code:

您的代码：

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

You just needed to specify a maximum height on the image so it could not overflow the container:

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

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

JSFiddle demo

JSFiddle 演示

---

---

The second problem, which is to scale the size of the image container, and drag up the grid items below when the image gets smaller, is significantly more complex.

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

This isn't an issue relating to the image. In fact, you can remove the image altogether when trying to solve this problem.

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

This is an issue of dynamically sizing a grid item (the image container). Why would this grid item change size in relation to the image size, when its size is being controlled by grid-template-columnsand grid-template-rows?

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

In addition, why would the bottom row of grid items (tag, album, rotate) follow the image container either up or down? They would have to exit their row.

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

Scaling the entire grid container wouldn't be a problem. But it seems like you only want to scale one grid item (the image container). It's tricky. You're probably looking at additional containers, autovalues for lengths, and possibly scripting.

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

Here's what happens if you give the image rows an autovalue: JSFiddle demo

如果给图像行一个auto值，会发生以下情况：JSFiddle 演示

回答by flyer

What if you use a background-imageinside one of the grid cells rather than an IMG tag (haven't used display: grid yet b/c it's so new - cool!)

如果您在其中一个网格单元格中使用背景图像而不是 IMG 标签（还没有使用 display: grid but b/c 它是如此新 - 酷！）

Then using background-sizeand background-position, you can size it properly within that cell.

然后使用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>

回答by Dado

I have a slight correction which works for any combination of aspect ratio of both css-grid cellandsrc img. (As the accepted solution only works if the aspect ratio of the cell is greaterthan the aspect ratio of the image). It's very simple:

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

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

回答by Zyad Sherif

You probably need to add explicit width: 100% to the image

您可能需要为图像添加明确的 width: 100%