网格中的图像缩放不正确

问题描述 投票:0回答:1

我需要显示一个带有方形图像的简单网格。我惊讶地发现,当图像是网格的直接子级时,它无法正常工作。图像变得太大,相互重叠。

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

img {
  aspect-ratio: 1 / 1;
  background-color: orange;
  object-fit: contain;
}
<div class="grid">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
</div>

如果我将

width: 100%
height: 100%
应用于
img
,它会正常工作,但我试图理解为什么。

是否有一些额外的方法来处理网格内的图像尺寸?当网格已经指示他们这样时,为什么他们需要明确的尺寸?

html css css-grid
1个回答
0
投票

当网格已经指示他们这样时,为什么他们需要明确的尺寸?

电网在哪里提供这些说明?事实并非如此。

您的规则

grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))
设置列。它不适用于这些列内的内容。

无需向图像添加

width: 100%
,它们会计算其固有尺寸,在本例中为 1920 x 1080。

作为 HTML/CSS 的一般做法,添加

img { width: 100%; height: auto }
以防止图像溢出其容器。

© www.soinside.com 2019 - 2024. All rights reserved.