响应式图片的底线是max-width: 100%和height: auto必须同时使用，前者防溢出，后者保比例；仅靠CSS缩放不够，需结合srcset与sizes适配设备像素比和视口宽度，复杂场景（如构图切换、格式降级）则必须用配合按AND逻辑匹配。

img 标签加 max-width: 100% 和 height: auto 是底线

不设这两条，图片就根本谈不上“响应式”——它会按原始尺寸渲染，一遇到窄容器立刻溢出或撑破布局。很多开发者只写 max-width: 100%，却漏掉 height: auto，结果图片被压扁或拉长。

必须同时用：

• max-width: 100%：让图片宽度不超父容器，但允许它比容器小（比如小图放在大盒子里）
• height: auto：强制按原始宽高比缩放，否则浏览器默认把 height 当成 auto，但 width 改变后 height 不联动，就会变形
• 别用 width: 100% 替代 max-width: 100%，否则小图会被强行拉宽失真

srcset + sizes 才算真正适配不同设备像素比和视口宽度

只靠 CSS 缩放，图片文件还是那个大文件，浪费带宽、拖慢首屏。要让浏览器自己选最合适的资源，必须组合用 srcset 和 sizes。

常见错误是只写 srcset 不写 sizes，或者 sizes 写成死值 "100vw"，而实际图片在 flex 容器里只占 50% 宽——这会导致浏览器误判，加载两倍大的图。

• srcset 中每个资源后必须标注 480w 或 2x，不能混用
• sizes 是字符串，支持媒体查询语法，如 "(max-width: 768px) 100vw, 50vw"，必须和 CSS 实际渲染宽度一致
• 图片宽度建议按 1.5× 步进生成：320w、480w、768w、1200w、1920w

需要换构图或格式时， 不可替代

的 srcset 只能响应分辨率或视口宽度，没法处理「竖屏裁特写、横屏展全景」或「优先 WebP，不支持就退 jpg」这类需求。这时候必须用 。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

它的 是顺序匹配，media 和 type 是 AND 关系——浏览器跳过任何一个条件不满足的项。

• 把最具体、最高优先级的规则放最前面，比如先匹配 (min-width: 1024px) and (min-resolution: 2dppx)
• type="image/webp" 拼错（如多写分号）或浏览器不支持，整条 就被忽略
• 兜底的 必须存在，且不能省略 src 和 alt

Grid 布局做图片网格时，auto-fit + minmax() 是稳定解

用 flex-wrap 做图册，最后一行经常留白、列宽不均、断行错位——尤其图片原始尺寸不一致或异步加载时。Grid 的 auto-fit + minmax() 才能真正填满整行、自动调节列数。

• 核心写法：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
• 必须用 gap 控制间距，别用 margin 模拟，否则网格对齐逻辑会崩
• IE10+ 兼容写法：改用 grid-column-gap 和 grid-row-gap
• 图片宽高比差异大时，统一加 aspect-ratio: 4/3，或套一层
  并设 overflow: hidden

  最容易被忽略的是 sizes 和实际 CSS 渲染宽度的同步，以及 中 media 和 type 的 AND 逻辑——写错一个条件，整条规则就失效，还查不出原因。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！