如何实现图片超出容器外部？CSS Grid布局适配问题求助

现有如下CSS与HTML代码：

img {
  display: block;
  max-width: 100%;
}

.hero {
  padding-inline: 2rem;
  margin-inline: auto;
  margin-block: 10rem;
  border: 1px solid blue;
}

.hero-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 2fr;
  max-width: 800px;
  border: 1px solid red;
  margin-inline: auto;
}

<div class="hero">
  <div class="hero-layout">
    <div class="hero-content">
      <h1>Lorem Ipsum</h1>
      <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae, architecto veritatis eligendi aperiam nobis rerum dignissimos dolores cumque alias beatae exercitationem culpa, praesentium reprehenderit perferendis ab laudantium nulla non tenetur?
      </p>
    </div>
    <img src="https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=1950&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="hero-image">
  </div>
</div>

当前布局中图片与文字区域等高排列，期望实现图片向上超出.hero容器范围，同时保证.hero-layout容器高度自适应内容的效果。此前尝试position: relative加负top值的方案，无法让容器高度自适应内容。

最优实现方案 #

利用CSS Grid特性结合负外边距实现，无需脱离文档流，容器高度会自动适配内容：

修改CSS，给.hero-image添加以下样式：

.hero-image {
  margin-top: -8rem; /* 根据需求调整偏移距离 */
  align-self: start;
}

原理说明： #

• align-self: start：让图片在网格单元格内顶部对齐，避免被强制拉伸至与内容区等高；
• 负margin-top：让图片向上偏移超出.hero容器范围，由于外边距属于文档流范畴，不会导致容器高度忽略图片的布局影响，同时容器高度会自然由内容区决定，完美适配需求；
• 整个布局保持响应式，图片依然会自适应容器宽度。

内容的提问来源于stack exchange，提问作者Murilo Zabott