C08 图片表格与嵌入内容

摘要：图片、视频、表格与 iframe 都是替换元素或具有独立内部布局的元素，默认的尺寸规则与文本不同：图片按固有尺寸显示、表格按内容自动分配列宽、iframe 需要显式高度。统一的做法是先用 aspect-ratio 与 inline-size 固定外框，再用 object-fit 决定内容如何填入。本文给出图片裁切、表格列宽与边框合并、嵌入内容自适应三项完整写法。
关键词：object-fit，aspect-ratio，表格布局，替换元素，嵌入内容

所属：frontend/css / C-高级 ｜ 上一篇：C07-表单控件与原生控件 ｜ 下一篇：D00-总结 ｜ 返回：C00-总结

1 引言

列表页的封面图被拉扁、表格列宽随内容忽宽忽窄、视频嵌入后出现黑边、图片底部多出几像素缝隙。四项的共同点是：这些元素的内容尺寸由资源本身决定，不服从普通的块级布局规则。

本文给出把外框与内容尺寸解耦的写法。范围见表 1-1。

项	本文覆盖	本文不覆盖
图片	object-fit、object-position、aspect-ratio	编解码与压缩格式选择
响应式	sizes、srcset、<picture>	图片 CDN 与转码服务
表格	table-layout、border-collapse、caption-side	复杂表头与冻结列
嵌入	iframe、video 的自适应与基线问题	跨域嵌入与脚本通信

表 1-1 本文覆盖范围

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
文件	css-practice/media.html	编码 UTF-8
浏览器	Chrome 130+	支持 aspect-ratio
前置	A04、C01	盒模型与宽高比已掌握

表 2-1 环境与前置要求

3 原理与实现

3.1 外框与内容尺寸分离

外框由 CSS 决定，内容由资源决定，object-fit 决定两者不一致时的取舍，如图 3-1 所示。

flowchart TD
    A["外框 aspect-ratio + inline-size"] --> B{"内容比例是否匹配"}
    B -->|匹配| C["直接铺满"]
    B -->|不匹配| D{"object-fit 取值"}
    D -->|cover| E["裁切：填满外框，可能裁掉边缘"]
    D -->|contain| F["留白：完整显示，两侧留空"]
    D -->|fill| G["拉伸：变形，仅用于纯色块"]
    E --> H["用 object-position 决定裁哪一侧"]

图 3-1 外框与内容比例的三种取舍

图上可见：封面图用 cover 并配 object-position: center 可保证不留白；头像与商品图用 contain 可保证不被裁掉关键部分。

3.2 完整实现

<!-- 运行环境：Chrome 130+；css-practice/media.html -->
<figure class="cover">
  <img src="/img/wide.jpg" alt="封面" width="1600" height="900" />
  <figcaption>16:9 封面</figcaption>
</figure>

<div class="avatar"><img src="/img/square.jpg" alt="头像" /></div>

<table class="grid-table">
  <caption>季度销量</caption>
  <thead>
    <tr><th scope="col">区域</th><th scope="col">Q1</th><th scope="col">Q2</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">华东</th><td>120</td><td>158</td></tr>
    <tr><th scope="row">华南</th><td>96</td><td>131</td></tr>
  </tbody>
</table>

<div class="embed"><iframe src="/player/1" title="播放" loading="lazy"></iframe></div>

/* 运行环境：Chrome 130+；css-practice/media.css */
/* 1 图片是行内替换元素，先转成块级消除基线缝隙 */
img, video, iframe, svg { display: block; max-inline-size: 100%; }

/* 2 封面：外框定比例，内容按比例裁切 */
.cover img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 30%;   /* 人物肖像时上移，避免裁到头部 */
  border-radius: 0.5rem;
}

/* 3 头像：固定方形外框，内容完整显示 */
.avatar img {
  inline-size: 4rem;
  block-size: 4rem;
  object-fit: contain;
  border-radius: 50%;
  background: #f1f5f9;
}

/* 4 表格：固定列宽算法 + 合并边框 */
.grid-table {
  inline-size: 100%;
  table-layout: fixed;           /* 按首行分配列宽，不受内容长度影响 */
  border-collapse: collapse;
  caption-side: top;
  text-align: start;
}

.grid-table th,
.grid-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0;
}

.grid-table thead th { background: #f8fafc; }

.grid-table td { overflow-wrap: break-word; }   /* 固定列宽后长文本需断行 */

/* 5 嵌入内容：按比例撑高，避免固定像素高度 */
.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.embed iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

图片适配的三种取舍见表 3-1。

取值	是否留白	是否裁切	适用场景
fill（默认）	否	否（拉伸变形）	纯色块、渐变占位
contain	是	否	头像、商品图、二维码
cover	否	是	封面、横幅、卡片图
none	视尺寸而定	是	图标、需要原始像素
scale-down	取较小者	否	尺寸不定的用户上传图

表 3-1 object-fit 取值与留白、裁切取舍

表格布局算法见表 3-2。

算法	列宽依据	渲染速度	适用场景
auto（默认）	扫描全部单元格内容	随内容变慢	内容少、列宽需自适应
fixed	只看首行与 width	快且稳定	数据表格、需要等宽

表 3-2 两种表格布局算法的差异

边框与间距三项见表 3-3。

属性	作用	常见取值
border-collapse	相邻单元格边框是否合并	collapse / separate
border-spacing	分离模式下的单元格间距	0 / 0.5rem
caption-side	表格标题位置	top / bottom
empty-cells	空单元格是否显示边框	show / hide

表 3-3 表格边框与标题的三项设置

4 验证与讨论

1. 把封面图换成 1:1 的图片，确认外框仍是 16:9 且图片被上下裁切。
2. 把 object-fit 改为 contain，确认出现左右留白且图片不变形。
3. 给表格某一行的文本加长，确认 table-layout: fixed 下列宽不随之变化。
4. 删除 img { display: block }，确认图片底部出现约 4 像素缝隙。

检查项	预期结果	说明
比例稳定	任何原图都填满同一外框	图 3-1
裁切可控	object-position 改变可见区域	表 3-1
列宽稳定	长文本不撑宽列	表 3-2
基线修复	图片底部无多余缝隙	3.2 节 display: block
嵌入自适应	窄屏下播放器保持 16:9	3.2 节 .embed

表 4-1 五项验收

讨论与局限。 table-layout: fixed 下长单词超出会溢出，需要 overflow-wrap: break-word 配合。另，object-fit 只作用于替换元素，普通 div 的背景图需用 background-size: cover 达到相同效果，见 B07。

5 常见问题

现象	原因	处理
图片被拉扁或拉长	同时写死宽与高	只定一边，另一边用 aspect-ratio
图片底部多出缝隙	行内元素的基线留白	display: block 或 vertical-align: middle
封面出现左右白边	用了 contain	封面改 cover
表格列宽忽宽忽窄	默认 auto 布局	改 table-layout: fixed
表格边框看起来是双线	separate 模式	改 border-collapse: collapse
iframe 在窄屏出现黑边	固定了像素高度	用 aspect-ratio 容器包裹
图片加载时布局跳动	未声明 width/height 属性	在 HTML 上写固有尺寸，由 CSS 覆盖

表 5-1 图片与表格的七类问题

6 结论

序号	结论	依据
1	外框定比例，内容用 object-fit 适配	图 3-1
2	图片转块级元素消除基线缝隙	3.2 节
3	数据表格一律 table-layout: fixed	表 3-2
4	嵌入内容用比例容器包裹，不写死高度	表 5-1

表 6-1 结论汇总

• 上一篇：C07-表单控件与原生控件
• 下一篇：D00-总结
• 返回：C00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · object-fit，https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit（访问于 2026-10-31）
[2] MDN Web Docs · 表格样式化，https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables（访问于 2026-10-31）