这样手机上下载小图、桌面下载大图，CSS 等比缩放规则照样起作用。loading='lazy' 让首屏外的图延迟加载，decoding='async' 让图片解码不阻塞主线程。我自己的内容站换成这套以后，移动端 LCP 从 3 秒多降到 1.8 秒上下。
## 用 picture 元素提供 WebP/AVIF 后备
更彻底的做法是用 picture 标签，让现代浏览器拿 AVIF/WebP、老浏览器 fallback 到 JPG：
fetchpriority='high' 是 Chrome 101+ 支持的属性，对 LCP 指标改进非常明显——我测过一个新闻站，加上后 P75 LCP 从 2.8 秒降到 1.9 秒。
## aspect-ratio 与 object-fit 的现代方案
除了 max-width + height: auto 这套基础方案，CSS 现在还多了几个有用属性：
## aspect-ratio 防止 CLS 更优雅的写法
.article-content img {
max-width: 100%;
height: auto;
aspect-ratio: attr(width) / attr(height); /* 未来语法 */
}
/* 当前可用的写法：给具体类名硬编码比例 */
.cover-16-9 {
aspect-ratio: 16 / 9;
object-fit: cover;
}
attr(width) 用于 aspect-ratio 还在 CSS Values Level 4 草案，目前 Chrome 不支持。但用具体类名定 aspect-ratio 是完全 OK 的，比 HTML 上写 width/height 灵活得多。
## object-fit: contain vs cover 的区别
object-fit 值 | 裁切策略 | 适用场景 |
contain | 等比缩放到容器内最大，可能留白 | logo、产品图，要看全 |
cover | 等比缩放到容器全覆盖，可能裁切 | 封面图、列表卡片缩略图 |
fill（默认） | 拉伸填满，会变形 | 不要用 |
none | 原始大小，不缩放 | 需要精确像素的截图 |
scale-down | 取 contain 和 none 中更小 | 小图保持原大、大图缩进容器 |
正文文章图一般用 contain（默认布局）；列表页缩略图、首页 banner 用 cover 配合 aspect-ratio 控制裁切。
## 调试时常踩的几个坑
保哥这些年帮人改主题，发现"图片不居中"、"图片不缩放"十次有八次不是 CSS 写错了，而是被覆盖或者作用范围不对。几个高频问题：
第一个，编辑器里图片自带 inline style。富文本编辑器经常会给 img 加 style="width:1200px" 这种内联样式。内联样式优先级最高，CSS 里写 max-width: 800px 也压不住。解决办法是在 CSS 加 !important，或者改编辑器配置不让它写 width。
第二个，外层包了 figure 或 p。有些 Markdown 渲染器会把图片包在 figure 或 p 里，这两个标签自己也是块级元素，会"代替"img 占据宽度。这种情况要把规则同时写到外层：.post-content figure { max-width: 100%; }。
第三个，Flex/Grid 布局下 img 不收缩。如果父级是 display: flex，img 默认 min-width: auto，可能溢出容器。补一句 min-width: 0 或 flex-shrink: 1 就好。
第四个，背景图不受 img 规则约束。background-image 是 CSS 属性不是 HTML 标签，要单独用 background-size: contain 或 cover 来控制。
第五个，编辑器残留的 transform: scale()。某些可视化编辑器（比如某些 SaaS 编辑器导出的代码）会用 transform: scale 而不是 width/height 控制图片大小。CSS 里普通的 max-width 压不住 transform。要单独写 .article-content img { transform: none !important; }。
第六个，浏览器 zoom 缩放与 CSS 缩放冲突。用户在浏览器层按 Ctrl+加号 放大页面时，display: block + margin: 0 auto 在某些 Firefox 版本下会出现 1-2 像素的水平偏移，对完美主义者来说很碍眼。修法是给图片父容器加 text-align: center 作为兜底。
## 把图片样式做成跨主题可复用的 CSS 模块
我现在维护多个站点，所以把图片样式抽成一个独立 .css 文件，所有站点都引同一个，改一次全站受益：
/* /assets/css/article-img.css —— 跨主题通用图片样式 */
.article-img,
.article-content img,
.entry-content img,
.post-content img,
.t_f img,
#zoom img {
max-width: min(100%, 880px);
height: auto;
display: block;
margin: 16px auto;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.article-img:hover,
.article-content img:hover {
cursor: zoom-in;
}
/* 图片下面如果跟着 figcaption，加一个小标题样式 */
.article-content figure {
max-width: 100%;
margin: 16px auto;
}
.article-content figcaption {
font-size: 13px;
color: #888;
text-align: center;
margin-top: 6px;
}
@media (max-width: 768px) {
.article-content img { margin: 12px auto; border-radius: 2px; }
}
这种集中管理的好处：升级主题不会丢、跨主题视觉一致、调一处全站生效。
## SEO 与可访问性：alt、title 与结构化数据
除了视觉效果，正文图片的 SEO 与可访问性也要做：
- alt 属性：每张图必填，描述图片内容。空 alt（alt=''）仅用于纯装饰图。
- title 属性：可选，鼠标悬停时显示。注意不要和 alt 内容完全一样，那是重复噪音。
- loading='lazy'：首屏外的图全部 lazy，首屏内的关键图（比如封面）保留 eager。
- schema.org ImageObject：用 JSON-LD 给图片标注作者、版权、license，让 Google 图片搜索更友好。
## 常见问题解答
## 为什么我加了max-width: 100%图片还是溢出？
大概率是父容器自己就溢出了，或者img上有内联style。先打开DevTools看img的计算样式（Computed）里max-width实际是不是100%；如果不是，往上找哪条规则覆盖了它，常见的是富文本编辑器写在标签里的style属性。加!important是最快的临时解法，根治要去后台编辑器配置里禁掉。另一种常见原因是父容器 white-space: nowrap 把所有内联元素挤成一行，img 撑破容器宽度。
## 写了height: auto为什么图片还是被压扁？
通常是因为同时设置了固定height，或者外层容器有固定高度并且对img使用了height: 100%。把固定height改成auto，让浏览器按宽度算高度，比例就对了。另外检查CSS里有没有aspect-ratio被错误地写在img上。还有一种隐性原因：图片父级是grid或flex且设置了 align-items: stretch，会强制 img 拉伸到容器高度，改成 align-items: start 即可。
## 移动端图片太大想强制缩到屏幕80%怎么办？
不建议为了视觉效果硬缩，会浪费屏幕空间。如果确实要，可以用媒体查询：@media max-width 768px下 .post-content img { max-width: 80%; }。但更好的做法是优化你的整篇文章排版，让图片自然占满阅读区。强制缩 80% 在 4 寸小屏（iPhone SE）上会显得文字太密，并不一定真的更好读。
## 用了CSS等比缩放，原图还要不要在服务端压缩？
要。CSS只控制显示尺寸，不改变下载体积。一张5MB的4000px宽图，CSS把它显示成800px，浏览器还是要下载完整5MB。所以服务端裁切加WebP/AVIF压缩加srcset多尺寸是必须做的，不能靠CSS偷懒。建议链路：上传时生成 400/800/1600 三档尺寸 + WebP/AVIF 副本，前端用 picture + srcset。
## aspect-ratio 在生产环境能用吗？
能。aspect-ratio 在 Chrome 88+、Firefox 89+、Safari 15+ 都支持，市占率覆盖 95% 以上。对老浏览器降级的方式是用 padding-top 百分比技巧（padding-top: 56.25% 等价 16:9），但写起来麻烦得多。我现在的新项目里 aspect-ratio 已经裸奔用了 3 年，没碰到过用户反馈。
## 怎么处理编辑器粘贴进来的 base64 图片？
base64 图片用 max-width: 100% 同样有效，但有两个坑：一是 base64 内嵌的图体积大、不能 CDN 缓存，对页面加载性能不友好；二是 alt 经常被编辑器丢空。建议在保存文章时用一个钩子函数把 base64 解码、保存到 OSS、把 src 替换成 URL。WordPress 有现成插件，Typecho 我自己写过一个 hook 跑了 6 年没出过事。
## SVG 图片要不要单独处理？
要。SVG 是矢量图，没有"原始宽度"概念，给它写 max-width: 100% 经常不生效。建议在 SVG 标签上显式加 viewBox 和 preserveAspectRatio 属性，CSS 里写 .article-content svg { width: 100%; height: auto; }。注意是 width 不是 max-width——SVG 不会失真，width 100% 是 OK 的。
## 图片放大查看（lightbox）怎么做最轻？
不需要重型 lightbox 库。HTML5 原生 dialog 元素配合 5 行 JS 就能做出来：点击 img 时打开 dialog 显示同一张图的大图。Lightbox 库要 30~80 KB，原生 dialog 是 0 字节。我在自己博客上跑这个方案三年了，体验比 fancybox 还好。具体写法可以单独写一篇文章详述。
## 权威参考资料
## 段落首行缩进2字符的CSS实现4种方法对比
- URL：https://zhangwenbao.com/automatically-empty-two-lattice-css-codes-at-the-beginning-of-a-paragraph.html
- 分类：CSS教程
- 发布：2018-02-25 | 更新：2026-06-02
- 摘要：段落首行缩进2字符，CSS怎么写才稳？本文给完整方案：text-indent: 2em的最佳实践、四种写法对比（含错误用法）、图片偏移与英文段落与列表项等六个常见踩坑、移动端媒体查询适配，再到letter-spacing、字体回退栈等中文排版八项进阶优化，一次配齐生产级样式。
- 关键词：段落缩进,CSS排版,text-indent,中文排版,首行缩进
> **TLDR**：摘要：中文段落讲究首行缩进2字符，CSS怎么写才稳？本文给完整方案——text-indent设2em的最佳实践、四种写法对比含错误用法、行内style临时局部生效，再讲图片偏移和英文段落和列表项等几个常见坑、移动端媒体查询适配，以及letter-spacing和字体回退栈等中文排版进阶优化，并讲在Typecho主题里怎么落地。
> 摘要：中文段落讲究首行缩进2字符，CSS怎么写才稳？本文给完整方案——text-indent设2em的最佳实践、四种写法对比含错误用法、行内style临时局部生效，再讲图片偏移和英文段落和列表项等几个常见坑、移动端媒体查询适配，以及letter-spacing和字体回退栈等中文排版进阶优化，并讲在Typecho主题里怎么落地。
做中文网站排版的朋友一定都遇到过这个问题：在Word或者印刷书籍里，每个段落开头自然空两格是基本规则，可一旦把内容搬到网页上，所有段落都顶着左边距挤成一坨豆腐块，阅读体验立刻下降一个档次。
保哥这十多年做主题开发和SEO优化，发现绝大多数中文站点都没把这个细节做好，要么不缩进，要么靠在编辑器里手动敲全角空格来糊弄，结果在不同终端、不同字号下完全失控。其实只要一行CSS，就能从根本上解决这个问题。本文保哥把段落首行缩进的来龙去脉、4种实现写法、常见坑点、移动端适配和进阶中文排版优化全部讲透，附上Typecho主题的落地步骤。
## 为什么中文段落必须首行缩进
首行缩进不是一个可有可无的装饰，而是中文阅读习惯里的硬性规则。它有三个核心作用：
第一，视觉分段。中文不像英文那样有空格分词，整段文字密度极高，如果段落之间没有显著标记，眼睛很难快速定位段落起点。首行缩进相当于给每个段落贴了一张开始标签。
第二，节奏感。书面中文讲究起承转合，段首缩进给读者一个微小的视觉停顿，让阅读节奏更舒缓。豆腐块式的排版会让人产生压迫感，平均阅读时长下降，跳出率 (https://zhangwenbao.com/user-behavior-signals-reshaping-seo-dwell-time-bounce-rate.html)上升。
第三，SEO间接收益。Google和百度的页面体验信号里，停留时长、滚动深度、阅读完成率都是间接因素。排版好的页面用户读得下去，停留就长，这对排名是有正向影响的。
保哥在自己的博客zhangwenbao.com上做过一次A/B测试 (https://zhangwenbao.com/ab-testing-page-seo.html)：把首行缩进打开和关闭分别跑两周，开启缩进的版本平均停留时长从1分47秒提升到2分31秒，跳出率从68%降到54%。一行CSS带来的提升，比很多花哨的优化手段都更明显。这个结果在保哥后来给客户站做的几个测试里也得到了重复验证，提升幅度从25%到50%不等，差异主要来自原始排版的烂程度——原来越糟，提升越大。
## 最基础的写法：text-indent 属性
CSS提供了一个专门为这种场景设计的属性 text-indent，它的作用是设置块级元素第一行的缩进距离。最经典的写法就是缩进两个字符：
/* 给文章正文容器加上首行缩进 */
.post-content p {
text-indent: 2em;
}
这里有几个细节保哥要重点提醒：
- 单位用em而不是px。em 是相对单位，跟随当前元素的字号变化。如果用户把字号放大到18px，缩进会自动变成36px；如果用户把字号缩小到14px，缩进自动变成28px。这才符合中文两个字的语义。如果写成 text-indent: 32px，字号一变就错位了。
- 作用对象选 p 而不是容器。把缩进加在容器上只会影响容器自己的第一行，下面的子段落不受影响。要让每一段都缩进，必须把样式打到段落标签 
等元素。
后面还可以接更多段落、更多图片、视频、引用块等内容。
第三，新一代图片格式。通过picture标签让支持的浏览器优先加载更小的格式，比传统 JPG 节省 30% 左右。WebP 在所有现代浏览器中都支持，AVIF 在 Chrome、Firefox 中支持。
- 首项
- 次项
- 加载中
头像
这里是一段非常非常非常长的标题文字
新
| 写多少个text-overflow: ellipsis，它都不会触发，因为列会自己变宽。要让单元格里的省略号生效，必须把 |
本示例展示了如何实现SEO友好的内容折叠/展开功能。所有内容在HTML中完整存在，通过CSS初始隐藏部分内容，JavaScript负责切换显示状态。这种实现方式不会影响搜索引擎抓取完整内容。
技术实现原理
这种实现方式的核心是：
- 所有内容直接写在HTML中，确保搜索引擎爬虫可以完整抓取
- 使用CSS设置初始状态：
max-height: 0和overflow: hidden隐藏内容 - 通过JavaScript添加/移除类名来切换内容显示状态
- 使用ARIA属性（
aria-expanded,aria-controls）增强可访问性
当用户点击"Show More"时，JavaScript会添加一个扩展类（如.expanded），该类将max-height设置为足够大的值以显示全部内容，同时改变按钮文本和指示图标。
这种方法的优势在于：
- 完全符合SEO要求，所有内容对爬虫可见
- 提供平滑的展开/收起动画效果
- 对屏幕阅读器等辅助技术友好
- 不需要依赖第三方库
SEO最佳实践
在实现内容折叠功能时，遵循这些SEO最佳实践：
内容策略
- 将最重要的关键词和信息放在默认可见区域
- 折叠区域应包含有价值的补充内容，而非核心信息
- 避免为了关键词堆砌而隐藏内容
- 确保折叠内容与页面主题高度相关
技术实现
- 永远不要使用JavaScript动态加载隐藏内容
- 避免使用
display: none隐藏主要内容 - 确保HTML中所有文本内容都是真实文本而非图片
- 使用结构化数据标记内容
用户体验
- 在移动设备上优先考虑折叠设计
- 提供清晰的视觉提示（图标、动画）
- 确保折叠按钮足够大，易于点击
- 保持折叠/展开状态的一致性
代码示例
<!-- HTML结构 -->
<div class="collapsible">
<button class="collapsible-header"
aria-expanded="false"
aria-controls="contentSection">
显示更多内容
</button>
<div id="contentSection" class="collapsible-content">
<!-- 所有内容直接写在这里 -->
<p>这是会被折叠的内容...</p>
</div>
</div>
/* CSS样式 */
.collapsible-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.collapsible-content.expanded {
max-height: 1000px; /* 足够大的值容纳内容 */
}
// JavaScript逻辑
document.querySelectorAll('.collapsible-header').forEach(button => {
button.addEventListener('click', () => {
const expanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !expanded);
const content = document.getElementById(button.getAttribute('aria-controls'));
content.classList.toggle('expanded');
});
});
<div class="collapsible">
<button class="collapsible-header"
aria-expanded="false"
aria-controls="contentSection">
显示更多内容
</button>
<div id="contentSection" class="collapsible-content">
<!-- 所有内容直接写在这里 -->
<p>这是会被折叠的内容...</p>
</div>
</div>
/* CSS样式 */
.collapsible-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.collapsible-content.expanded {
max-height: 1000px; /* 足够大的值容纳内容 */
}
// JavaScript逻辑
document.querySelectorAll('.collapsible-header').forEach(button => {
button.addEventListener('click', () => {
const expanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !expanded);
const content = document.getElementById(button.getAttribute('aria-controls'));
content.classList.toggle('expanded');
});
});
SEO注意事项
Google官方明确表示：只要内容在HTML源代码中存在且不是用于欺骗搜索引擎，使用CSS和JavaScript实现的折叠内容不会影响SEO排名。
您可以使用Google Search Console的"URL检查"工具验证搜索引擎看到的页面内容是否包含所有折叠区域内的文本。
最佳实践是将折叠功能用于：长文章的分段、FAQ回答的完整内容、产品详细规格等补充信息，而不是页面核心内容。