主页 / coding / 问题 / 79333970
Accepted
SaroGFX
Asked: 2025-01-07 02:21:25 +0800 CST

如何限制网格的高度以匹配文本内容的高度，而不是超大图像？[重复]

  • 772

我有一个包含两列的 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, 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

1 个回答

  1. Best Answer

    我不确定使用有什么非本机的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>

    • 2

相关问题