Início / user-10546172

SaroGFX's questions

Martin Hope
SaroGFX
Asked: 2025-01-07 02:21:25 +0800 CST
  • 5

Tenho uma grade CSS com duas colunas: uma contém texto e a outra contém uma imagem. O problema é que a altura da grade está sendo ditada pela imagem, que é maior que o texto. Quero que a altura da grade siga a altura do texto.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 1em;
}

.image-container img {
  max-height: 100%;
  width: 100%;
  height: auto;
}

.text {
  background: lightblue;
}
<div class="grid">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet purus ac nunc.
  </div>
  <div class="image-container">
    <img src="https://primary-test.jwwb.nl/unsplash/vigsqYux_-8.jpg" alt="Example image" />
  </div>
</div>

Eu poderia resolver isso adicionando uma posição absoluta à imagem, para que ela seja removida do fluxo de conteúdo. Mas eu acho que há algo que o sistema de layout de grade oferece para fazer isso nativamente. Há?

Aqui está a solução com posição absoluta:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

.image-container {
  position: relative;
}

.image-container img {
  position: absolute;
  max-height: 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.text {
  background: lightblue;
}
<div class="grid">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet purus ac nunc.
  </div>
  <div class="image-container">
    <img src="https://primary-test.jwwb.nl/unsplash/vigsqYux_-8.jpg" alt="Example image" />
  </div>
</div>

css