Início / coding / Perguntas / 77024284
Accepted
Robo Robok
Asked: 2023-09-01 23:15:12 +0800 CST

Imagens dimensionadas incorretamente na grade

  • 772

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

1 respostas

  1. Best Answer

    Por que eles exigem dimensões explícitas quando a grade já deveria instruí-los sobre isso?

    Onde a grade fornece essas instruções? Isso não acontece.

    Sua regra grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))configura as colunas. Não se aplica ao conteúdo dessas colunas.

    Sem adicionar nada width: 100%às imagens, eles calculam seu tamanho intrínseco, que neste caso é 1920 x 1080.

    Como prática geral em HTML/CSS, adicione img { width: 100%; height: auto }para evitar que as imagens transbordem de seus contêineres.

    • 2

relate perguntas