本文介绍如何仅使用 html 和内联 css（不依赖外部样式表），通过媒体查询动态切换 banner 图片——小屏显示小图，大屏（≥768px）自动替换为高清大图。
在纯 HTML 环境中实现响应式图片切换，关键在于结合 。虽然 标签本身不支持直接在 HTML 属性中写媒体查询，但我们可以将
以下是完整、可直接运行的示例代码：
<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(...) 可用于
元素，但属于「CSS 替换内容」机制，会完全覆盖 src 属性（即小屏用 src，大屏用 content）。
- 为提升选择器特异性与可靠性，建议为
添加唯一 alt、id 或 class，并据此在媒体查询中精准定位（如上例使用 img[alt="Responsive Banner"]）。
- !important 可增强覆盖力，避免内联 src 的隐式优先级干扰（部分浏览器中 src 的权重较高）。
- 此方案无需 JavaScript，零外部文件，完全符合内联要求，适用于邮件模板、静态单页、CMS 富文本编辑器等受限环境。
⚠️ 兼容性提示：
IE 完全不支持 content 作用于 ；若需兼容 IE，应改用
总结：借助内联
立即学习“前端免费学习笔记（深入）”；
