我需要显示一个带有方形图像的简单网格。我惊讶地发现,当图像是网格的直接子级时,它无法正常工作。图像变得太大,相互重叠。
.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
,它会正常工作,但我试图理解为什么。
是否有一些额外的方法来处理网格内的图像尺寸?当网格已经指示他们这样时,为什么他们需要明确的尺寸?
当网格已经指示他们这样时,为什么他们需要明确的尺寸?
电网在哪里提供这些说明?事实并非如此。
您的规则
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))
设置列。它不适用于这些列内的内容。
无需向图像添加
width: 100%
,它们会计算其固有尺寸,在本例中为 1920 x 1080。
作为 HTML/CSS 的一般做法,添加
img { width: 100%; height: auto }
以防止图像溢出其容器。