响应式图片方案：HTML结构标签与CSS属性的协作实践-html教程-PHP中文网

HTML5结构标签无默认样式，图片响应式需CSS控制；仅width:100%会导致拉伸，须配合max-width:100%和height:auto；figure语义化不等于响应式，需CSS约束宽高比；srcset与sizes需匹配DPR和视口宽度；Flex/Grid中图片塌陷常因父容器未设布局、min-width未重置或高度未限定。

响应式图片方案：html结构标签与css属性的协作实践

HTML5结构标签本身不带默认样式，图片响应式必须靠CSS显式控制；盲目套用

或不等于自动响应，关键在CSS的max-width、height和object-fit组合。

为什么加`width: 100%`还不够

单纯写img { width: 100%; }会导致图片拉伸变形，尤其在宽高比固定的容器里。更常见的是父容器没设max-width，导致大屏下图片撑爆布局。

必须同时设置max-width: 100%和height: auto，否则高宽比失守
若父容器是flex或grid项，需确认其min-width未被设为auto（Chrome中默认行为会阻止收缩）
里的只负责提供不同分辨率资源，不替代CSS尺寸控制

+ 不是“响应式开关”，而是语义增强点

本身不参与尺寸计算，它只是告诉浏览器“这块内容自成一体”。真正起作用的是你给它的CSS——比如用display: grid配合aspect-ratio锁定缩略图比例。

错误用法：却不给figure设宽高约束，结果img按原始尺寸渲染
推荐写法：figure { width: 100%; aspect-ratio: 4/3; } + img { width: 100%; height: 100%; object-fit: cover; }
注意aspect-ratio在旧版Safari中需加-webkit-前缀，且不能与height冲突

用`srcset`和`sizes`前先理清设备像素比和视口宽度的关系

srcset里的2x指的是设备像素比（DPR），不是屏幕尺寸；sizes才是告诉浏览器“这张图在不同视口宽度下打算占多宽”。两者不匹配，高清屏照样加载小图。

HTML Text Extract

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

下载

典型错误：sizes="(max-width: 768px) 100vw, 50vw"但srcset只提供image.jpg和image@2x.jpg，缺image@3x.jpg——iPhone 15 Pro Max（DPR=3）就会降级用2x
安全写法：srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" + sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw"
工具建议：用sharp或imagemin批量生成多尺寸图，别手动拼接srcset