CSS Grid中响应式图片样式规则：<picture>与<img>的分配疑问

我搭建了一个2列2行的CSS Grid布局，顶部两格各放置一张图片，底部一格跨两列放置图片。为适配移动端布局，我使用了<picture>元素（每个<picture>仅包含一个<img>）。

根据规范描述，<picture>本身不显示内容，仅为内部<img>提供资源选择上下文，常规做法是将样式类应用于<img>而非<picture>。但当<picture>作为CSS Grid的直接子元素时，这个规则不再适用：grid-column这类网格布局规则必须直接作用在<picture>上才生效，而控制图片填充的样式类必须作用在<img>上才能达到预期效果。

这种行为在Firefox和Chrome中表现一致，但我未找到明确的文档说明，想搞清楚：

• 相关的规范依据是什么？
• 当前行为是否符合规范？
• 这属于Bug吗？
• 该行为是否稳定？

示例代码 #

CSS代码 #

.grid {
    display: grid;
    gap: 2rem;
    aspect-ratio: 1 / 1;
    grid-template: 1fr 1fr / 1fr 1fr;
    background-color: #ccc;
}
.cell {
    background-color: #dfd;
}
.cell-3 {
    grid-column: span 2;
}
.fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

HTML代码 #

<h2>1. Grid with divs</h2>
<p>Simple case. Everything is as expected here.</p>
<div class="grid">
    <div class="cell cell-1">Cell 1</div>
    <div class="cell cell-2">Cell 2</div>
    <div class="cell cell-3">Cell 3</div>
</div>

<h2>2. Grid with pictures, all classes on img elements</h2>
<p>I can't find proper documentation but as far as I understand it, classes shouldn't be put on picture elements but rather on the img elements within them, since picture elements aren't displayed, just provide context for the nested img.</p>
<p>So in this example all classes are on the img elements.</p>
<p>The .fill class is getting applied and so the images fill their cells and imagery zooms to fill. But the .cell-3 class is doing nothing; it's meant to make the bottom kitten fill both columns. Dev tools complain that it won't do anything because it's not on grid item.</p>
<div class="grid">
    <picture><img src="https://placekitten.com/400/400" width="400" height="400" class="cell cell-1 fill"></picture>
    <picture><img src="https://placekitten.com/400/400" width="400" height="400" class="cell cell-2 fill"></picture>
    <picture><img src="https://placekitten.com/800/400" width="800" height="400" class="cell cell-3 fill"></picture>
</div>

<h2>3. Grid with pictures, all classes on picture elements</h2>
<p>In this example I've moved all the classes to the picture element rather than the img element.</p>
<p>This time, the correct cell size is applied to cell 3 via the .cell-3 class. The .fill class is not having the expected effect, however; the images don't fill their cells.</p>
<div class="grid">
    <picture class="cell cell-1 fill"><img src="https://placekitten.com/400/400" width="400" height="400"></picture>
    <picture class="cell cell-2 fill"><img src="https://placekitten.com/400/400" width="400" height="400"></picture>
    <picture class="cell cell-3 fill"><img src="https://placekitten.com/800/400" width="800" height="400"></picture>
</div>

<h2>4. Grid with pictures, grid classes on picture elements, size classes on img elements</h2>
<p>This shows the desired output. In this example I've put the .cell* classes on the picture element and the .fill class on the img element.</p>
<div class="grid">
    <picture class="cell cell-1"><img src="https://placekitten.com/400/400" width="400" height="400" class="fill"></picture>
    <picture class="cell cell-2"><img src="https://placekitten.com/400/400" width="400" height="400" class="fill"></picture>
    <picture class="cell cell-3"><img src="https://placekitten.com/800/400" width="800" height="400" class="fill"></picture>
</div>

解答 #

1. 规范依据 #

• CSS Grid布局规范：Grid容器的直接子元素才是Grid项目，只有Grid项目能应用grid-column、grid-row这类网格布局属性。<picture>作为Grid容器的直接子元素，属于合法Grid项目；内部的<img>是<picture>的子元素，并非Grid容器的直接子元素，因此无法直接应用Grid布局属性。
• HTML <picture>元素规范：<picture>是容器型元素，默认display值为inline-block（部分浏览器为block），它虽不直接显示内容，但仍会作为布局流中的盒子存在，核心作用是为内部<img>提供资源选择上下文，而非完全脱离布局。

2. 当前行为是否符合规范 #

完全符合规范：

• 网格布局属性仅对Grid项目生效，<picture>作为Grid项目，grid-column作用于它自然有效；<img>不是Grid项目，因此给它加grid-column不会产生布局效果。
• object-fit是针对替换元素（<img>属于替换元素）设计的属性，<picture>作为容器元素不支持该属性，所以.fill类必须加在<img>上才能实现图片填充效果。

3. 是否属于Bug #

这不是Bug，是符合规范定义的正常行为。之前“把样式加在<img>上”的常规做法，是针对普通流布局的场景；当<picture>处于Grid/Flex这类需要直接控制容器位置的布局中时，就需要区分布局属性和内容样式的应用对象。

4. 行为是否稳定 #

该行为非常稳定。目前Chrome、Firefox、Safari等主流浏览器的实现完全一致，且符合规范核心定义，未来几乎不会出现变更。

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