本文介绍如何仅使用 html 和内联 css（不依赖外部样式表），通过媒体查询动态切换 banner 图片——小屏显示小图，大屏（≥768px）自动替换为高清大图。
在纯 HTML 环境中实现响应式图片切换，关键在于结合 <style> 标签内联媒体查询 + content: url() 替换 <img> 的内容。虽然 <img> 标签本身不支持直接在 HTML 属性中写媒体查询，但我们可以将 <style> 块嵌入 HTML 文档（允许出现在 <body> 内），利用 CSS 的 @media 规则和 content 属性动态覆盖图片源。
以下是完整、可直接运行的示例代码：
<div style="text-align: center; margin: 0 auto;">
<img src="small-banner.jpg" alt="Responsive Banner"
style="max-width: 100%; height: auto; border: none;">
<style>
@media (min-width: 768px) {
img[alt="Responsive Banner"] {
content: url('large-banner.jpg') !important;
/* 注意：content 仅对空元素或 replaced elements 生效，且 img 必须无内联 src 干扰 ——
实际兼容性要求：现代浏览器（Chrome/Firefox/Safari/Edge ≥ v100）支持良好，
但需确保 img 元素未被其他 CSS 覆盖 content 属性 */
}
}
</style>
</div>✅ 重要说明与注意事项：
- content: url(...) 可用于 <img> 元素，但属于「CSS 替换内容」机制，会完全覆盖 src 属性（即小屏用 src，大屏用 content）。
- 为提升选择器特异性与可靠性，建议为 <img> 添加唯一 alt、id 或 class，并据此在媒体查询中精准定位（如上例使用 img[alt="Responsive Banner"]）。
- !important 可增强覆盖力，避免内联 src 的隐式优先级干扰（部分浏览器中 src 的权重较高）。
- 此方案无需 JavaScript，零外部文件，完全符合内联要求，适用于邮件模板、静态单页、CMS 富文本编辑器等受限环境。
⚠️ 兼容性提示：
IE 完全不支持 content 作用于 <img>；若需兼容 IE，应改用 <picture> + srcset（但需 HTML5 结构，且非纯“内联 CSS”方案）。本文方案面向现代主流浏览器优化。
总结：借助内联 <style> 中的 @media 和 content，你可以在一行 HTML 中优雅实现响应式图片切换——简洁、有效、无外部依赖。
立即学习“前端免费学习笔记（深入）”；
