在CSS网格布局中控制图像的大小 [英] Controlling the size of an image within a CSS Grid layout

问题描述

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

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

我不知道如何：

1. 控制照片的大小，使其包含在网格区域内

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

将照片的宽度保持在100％（因此等于其容器），并缩放容器的高度以适合照片。基本上，当窗口变小时，照片的宽度变小，高度也变小-向上拉标签，相册和旋转元素。

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.

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

推荐答案

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

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.

您的代码：

.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演示

第二个问题是扩展图像容器，然后在图像变小时将其拖动到下面的网格项目中，会变得更加复杂。

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.

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

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-columns and grid-template-rows?

此外，为什么底部行的网格项（ tag ，相册，旋转）跟随图像容器向上还是向下？他们将不得不退出他们的行。

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.

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

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, auto values for lengths, and possibly scripting.

如果您为图像行提供了 auto 值： JSFiddle演示

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

这篇关于在CSS网格布局中控制图像的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！