我需要显示一个方形图像的简单网格.我惊讶地发现，当图像是网格的直接子级时，它不能正常工作.图像变得太大，相互重叠.
.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，它可以正常工作，但我试图理解为什么.
有没有其他方法来处理网格内部的图像大小？为什么他们需要明确的尺寸，而网格已经向他们提供了这样的指导？