CSS内联网格，图像和文本内容高度匹配问题

Question

我正在尝试使用 CSS

inline-grid

创建一个布局，其中在文本块旁边有一个圆形图像（使用

border-radius: 50%

创建圆圈）。文本在

clamp

上使用

font-size

，因此它具有响应性，因此根据视口宽度，它可能看起来更大或更小。

目标是使图像高度与文本高度匹配，但保持圆形。换句话说，两个高度相等的列，但其中一个仅包含图像。

我尝试了两种不同的方法，但都没有得到我想要的结果。

第一个版本使用

object-fit: cover

，你可以在这里看到我的CodePen：https://codepen.io/anwarmontasir/pen/KKJdBop。

.container {
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  grid-auto-rows: 1fr;
  gap: 0 1rem;
}
.circle {
  border-radius: 50%;
  border: 1px solid #999;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

问题是图像不再是圆形。两列的高度匹配，但根据视口宽度，图像有时会变成椭圆形，就像图像的某些部分被裁剪一样。

---

第二个版本使用

aspect-ratio: 1

，你可以在这里看到我的CodePen：https://codepen.io/anwarmontasir/pen/GRzpBqB

.container {
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  grid-auto-rows: 1fr;
  gap: 0 1rem;
}
.img-wrap {
  aspect-ratio: 1;
  height: 100%;
}
.circle {
  border-radius: 50%;
  border: 1px solid #999;
}

在这里，行为更像是我想要的——列的高度匹配，并且图像仍然是圆形。但是，根据视口宽度，两列有时会相互重叠。

感谢您的帮助，我尝试了很多解决方案，但无法解决此问题。

Answer 1

您可以使用 minmax 来阻止网格列变得太小（如第二个代码笔中所示）。通过将容器类 grid-template-columns 更改为

grid-template-columns: repeat(2, minmax(350px, 1fr));

，列将不会小于 350px，或您选择的任何值。

当然，另一个选择是使用 Flexbox，因为它更适合这种工作。

希望这有帮助！