移动端广告大图宽高自适应需三者兼顾：防撑破屏幕、保持比例、加载合适分辨率图片；核心是HTML结构+CSS控制+响应式资源选择；基础用max-width:100%和height:auto锁比例；父容器禁用固定宽高，改用width:100%或padding-top占位法维持宽高比；资源优化靠srcset+sizes按视口加载适配图；固定尺寸卡片中用object-fit裁剪或等比显示。
移动端广告大图要真正“宽高自适应”，不能只靠拉伸或固定尺寸，得兼顾三件事：不撑破屏幕、保持比例、加载合适分辨率的图。核心是 HTML 结构 + CSS 控制 + 响应式资源选择，缺一不可。
基础缩放：用 max-width + height:auto 锁定比例
这是防溢出的第一道防线：
- 必须写在 img 元素上：`img { max-width: 100%; height: auto; min-width: 0; }`
- 删掉 `
` 标签里的 `width` 和 `height` 内联属性，否则 `height: auto` 失效，图片会被压扁或拉长
- 如果广告图放在 flex 容器里（比如 banner 区域用了 `display: flex`），记得给该容器的子项（即图片或其父 wrapper）也加 `min-width: 0`，否则 flex 默认的 `min-width: auto` 会阻止图片收缩
容器响应：让父级“松手”，别卡死宽度
广告图再怎么设，也得有参照物。父容器若写死像素宽高，图片就只能在框里缩，无法真正适配小屏：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 避免 `` 这类写法；改用 `width: 100%` 或 `max-width: 100%`
- 如需维持特定宽高比（例如 750×300 的横幅），推荐用 padding-top 占位法：
`.ad-banner { position: relative; width: 100%; padding-top: 40%; /* 300/750 = 0.4 */ }`
然后图片用绝对定位铺满，既等比又不依赖内联 height资源优化：用 srcset + sizes 加载适合手机的图
一张 2MB 的桌面大图在 4G 网络下加载慢、耗流量——广告图尤其敏感：
- 提供多档尺寸源图，按固有宽度标注：`srcset="ad-375.jpg 375w, ad-750.jpg 750w, ad-1125.jpg 1125w"`
- 必须配 `sizes` 属性，告诉浏览器“这张图在不同断点下占多少视口”：
`sizes="(max-width: 375px) 100vw, (max-width: 768px) 50vw, 33vw"` - 这样 iPhone SE（375px 宽）会优先加载 375w 图，而不是误选 1125w 的大图
特殊场景：固定尺寸卡片里的广告图
比如信息流中统一 300×200 的广告卡片，但上传图比例各异：
- 卡片容器设固定宽高：`.card-ad { width: 300px; height: 200px; overflow: hidden; }`
- 图片加 `object-fit: cover`（裁剪填满）或 `object-fit: contain`（等比居中留白）
- 注意兼容性：iOS Safari 旧版需加 `-webkit-object-fit: cover`
- 如需维持特定宽高比（例如 750×300 的横幅），推荐用 padding-top 占位法：
