用 srcset + sizes 配合 object-position 可实现移动端图片预览又快又准：srcset 提供多尺寸图源，sizes 声明渲染宽度，浏览器据此加载合适图片；object-fit: cover 结合 object-position（如 50% 20%）确保关键内容不被裁切，且需 viewport 元标签和绝对路径保障在线环境兼容性。
直接用 srcset + sizes 配合 <img>，再加 object-position 控制焦点，就能在 HTML 在线运行系统里让移动端图片预览既快又准——不需要 JS，也不依赖外部库。
为什么在线运行环境必须用 srcset 而不是只靠 CSS 缩放
HTML 在线运行系统（比如 CodePen、JSFiddle、或自建的实时预览沙箱）通常直接渲染 HTML 片段，浏览器会在解析 HTML 阶段就发起图片请求。如果只写 img { max-width: 100%; height: auto; }，浏览器根本不知道这张图在手机上实际会占多宽，大概率加载一张 1200w 的图然后缩成 300px 显示，浪费带宽、拖慢首屏、还可能触发移动端图片解码卡顿。
-
srcset告诉浏览器“我提供了哪些尺寸的图”，例如"photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w" -
sizes告诉浏览器“在当前布局下，这张图会渲染成多宽”，例如"(max-width: 768px) 100vw, 50vw"，浏览器据此选最匹配的源 - 在线运行环境不支持服务端响应式（如通过 User-Agent 切图），所以客户端声明式方案是唯一可靠路径
如何在小屏预览时让关键内容不被裁掉
用 object-fit: cover 是基础，但真正决定“看到谁”的是 object-position。比如一张人像图，在桌面端居中显示没问题，但在手机竖屏下如果默认居中，可能只露出下巴；改成 object-position: top 就能确保面部始终可见。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先确认图片容器在移动端的 CSS 尺寸（比如
width: 100%; height: 300px;） - 给
<img>加style="max-width:90%" - 配合媒体查询动态调整：
@media (max-width: 768px) { img { object-position: 50% 20%; } }，把焦点上移至面部区域 - 避免用
left/right等绝对关键词，改用百分比更可控（20%表示从顶部起算 20% 处为焦点横轴中心）
在线运行时容易忽略的兼容性与调试细节
很多在线平台默认禁用某些属性或模拟不完整，导致 srcset 看似写了却没生效，或者 object-position 在 iOS Safari 上行为异常。
- 确保
中有正确的 viewport：<meta name="viewport" content="width=device-width, initial-scale=1">，否则sizes中的vw单位会失效 - 不要在在线编辑器里用相对路径测试，如
src="images/photo.jpg"—— 大部分沙箱不提供目录结构，直接用绝对 URL 或 base64 占位图更可靠 - Chrome DevTools 的 “Network → Img” 标签页能验证是否真加载了小图；右键图片 → “Open in new tab” 可看实际请求地址
- iOS Safari 对
object-position支持良好，但旧版 Android WebView（如 4.4）不支持，若需兼容可加降级提示或 fallback class
真正难的不是写对语法，而是把 sizes 的条件表达式和你实际写的 CSS 媒体查询严格对齐——差一个像素、漏一个断点，浏览器就可能选错图；而 object-position 的数值必须基于真实截图反复微调，不能凭感觉填 50%。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
