如何在CSS Grid图片灯箱中替换<img>为<picture>并保持布局？

我想构建一个简易图片灯箱，图片与标题以单列形式展示，且图片可缩放以和标题一同适配浏览器视口。目前我使用<img>标签实现了该效果，但替换为<picture>元素以支持多种图片格式时，却无法保持原有布局。我不清楚<picture>与其内部的<img>元素如何协同计算图片最终尺寸，也不知道如何让<picture>适配基于Grid的列布局，恳请帮助。

可用示例（原实现） #

CSS代码 #

body {
    padding: 0;
    margin: 0;
}

.lightbox {
    width: 100vw;
    height: 100vh;
}

.lightbox figure {
    display: grid;
    max-height: 100%;
    grid-template-rows: 1fr min-content;
}

.lightbox figure img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
    justify-self: center;
}

.lightbox figure figcaption {
    text-align: center;
}

HTML代码 #

<div class="lightbox">
  <figure>
      <img src="https://placehold.co/6000x4000" alt="">
      <figcaption>Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</figcaption>
    </figure>
</div>

待修改的标记（需保留布局） #

<div class="lightbox">
  <figure>
    <picture>
      <source srcset="...">
      <source srcset="...">
      <img src="https://placehold.co/6000x4000" alt="">
    </picture>

      <figcaption>Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</figcaption>
    </figure>
</div>

核心修改思路 #

<picture>本质是<img>的源选择容器，默认是inline-block元素，不会自动继承原<img>作为Grid项的布局行为。只需把原给<img>的布局样式同步应用到<picture>上，同时保持内部<img>的自适应逻辑即可。

修改后的CSS代码 #

body {
    padding: 0;
    margin: 0;
}

.lightbox {
    width: 100vw;
    height: 100vh;
}

.lightbox figure {
    display: grid;
    max-height: 100%;
    grid-template-rows: 1fr min-content;
}

/* 给picture添加和原img一致的Grid项样式 */
.lightbox figure picture {
    max-height: 100%;
    max-width: 100%;
    justify-self: center;
}

/* 内部img保持自适应，填充picture容器 */
.lightbox figure picture img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

.lightbox figure figcaption {
    text-align: center;
}

原理说明 #

1. <picture>作为Grid布局的第一行项目，需要和原<img>一样遵守max-height:100%、justify-self:center等限制，确保它在Grid行中正确占据空间。
2. 内部的<img>会自动继承<picture>的尺寸约束，通过max-width/max-height和object-fit:cover保持原有的缩放和裁剪逻辑，实现和之前完全一致的布局效果。

内容的提问来源于stack exchange，提问作者Skye Ewers