代码之家 › 专栏 › 技术社区 › SaroGFX

如何约束网格的高度以匹配文本内容的高度,而不是超大的图像?[副本]

css-grid css

SaroGFX · 技术社区 · 1 年前

我有一个有两列的CSS网格:一列包含文本,另一列包含图像。问题是网格的高度是由图像决定的,图像比文本大。我希望网格的高度跟随文本的高度。

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

我可以通过在图像中添加一个绝对位置来解决这个问题,这样它就可以从内容流中删除。但我认为网格布局系统本身就提供了一些东西来实现这一点。有?

以下是具有绝对位置的解决方案:

.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,consequent discused elit。Vivamus坐在最前面。
</div>
<div class=“图像容器”>
<img src=“https://primary-test.jwwb.nl/unsplash/vigsqYux_-8.jpg“alt=”示例图像“/>
</div>
</div>

1 回复 | 直到 1 年前

Alohci 1 年前

我不确定使用什么是非母语的 position: absolute ,但另一种选择是使用尺寸控制:

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

  gap: 1em;
}

.image-container {
  contain: size;
}

.image-container img {
  height: 100%;
  width: 100%;
  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>