Início / user-4403732

Robo Robok's questions

Martin Hope
Robo Robok
Asked: 2023-09-01 23:15:12 +0800 CST
  • 6

Preciso exibir uma grade simples com imagens quadradas. Fiquei surpreso ao descobrir que não funciona corretamente quando as imagens são filhas diretas da grade. As imagens ficam muito grandes, sobrepondo-se umas às outras.

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

Funciona corretamente se eu aplicar width: 100%e height: 100%para img, mas estou tentando entender o porquê.

Existe alguma maneira adicional de lidar com tamanhos de imagem dentro da grade? Por que eles exigem dimensões explícitas quando a grade já deveria instruí-los sobre isso?

html