CSS Grid实现组件高度随内容自适应，裁剪背景图

我用display: grid实现了一个Teaser组件，文本在图片上方，但当前图片会显示完整尺寸。我需要让组件高度随内容高度自适应，只展示图片对应内容高度的部分，不能设置固定高度，也无法使用position: absolute。尝试过grid-auto-columns: min-content及各类grid-template-*属性，但图片被完全隐藏了。

原代码片段 #

HTML

<div class="teaser">
  <div class="teaser-image">
    <img alt="img" src="https://static4.depositphotos.com/1003326/319/i/450/depositphotos_3191160-stock-photo-blurry-bright-background.jpg" />
  </div>
  <div class="teaser-content">
    <h2 class="teaser-title">Teaser</h2>
    <div class="teaser-desc">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis tincidunt urna. Cras blandit ante ac erat facilisis, id laoreet eros sodales. Curabitur gravida, magna feugiat congue luctus, ex urna luctus erat, at viverra urna sapien eu quam. Nunc vitae dui et arcu luctus mattis. Curabitur semper quam vel odio fringilla, sed aliquam ex tempor. Etiam egestas risus in mauris congue, at placerat risus suscipit. Donec ullamcorper mi et tristique lacinia. Sed at tempus elit. Ut in turpis massa.
    </div>
  </div>
</div>

CSS

.teaser {
  display: grid;
  color: #fff;
  text-align: center;
  align-items: center;
}
.teaser > div {
  grid-area: 1/1;
}
img {
  width: 100%;
}

解决方案 #

可以通过调整图片容器和图片的样式，让Grid容器高度由内容区决定，图片仅展示对应高度的部分：

修改后的CSS

.teaser {
  display: grid;
  color: #fff;
  text-align: center;
  align-items: center;
}
.teaser > div {
  grid-area: 1/1;
}
.teaser-image {
  height: 0;
  min-height: 100%;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

原理说明 #

• height: 0让图片容器初始不占据高度，min-height: 100%强制它拉伸至Grid容器的总高度（该高度由teaser-content的内容自动撑开）
• object-fit: cover确保图片按比例填充容器，只显示与内容高度匹配的区域，避免图片变形或拉伸
• 保留grid-area: 1/1让图片和内容区重叠，文本自然显示在图片上方

内容的提问来源于stack exchange，提问作者Annie Roy