最直接、兼容性最好、零JS依赖的方式是@media配合display:none隐藏图片，需根据容器渲染宽度设断点（如max-width:600px），并优先用的source media实现资源级跳过加载。
用 @media 控制图片在特定断点隐藏
最直接、兼容性最好、零 JS 依赖的方式就是媒体查询。关键不是“屏幕宽多少就藏”，而是先明确设计意图：比如「小屏下不显示侧边栏 logo」「横屏时隐藏竖构图 banner」。
常见错误是把断点硬设成 768px，但实际应根据设计稿中该图片容器的渲染宽度反推。例如：.header-logo 在桌面端占 200px 宽，其父容器为全宽；当视口 ≤ 600px 时，它大概率被压缩到不可接受尺寸——此时加规则：
@media (max-width: 600px) {
.header-logo { display: none; }
}
-
display: none是真隐藏：不占空间、不触发下载（如果它没在 - 别用
visibility: hidden或opacity: 0替代——前者仍占位且影响布局，后者仍可被聚焦、被读取，对键盘和无障碍用户不友好 - 若该图片是响应式
srcset+sizes控制了资源加载，否则display: none只是视觉隐藏，带宽早被浪费了
用
如果目标是「小屏根本不去请求高清图」，而不是「下载完再藏起来」，media 和 type 条件逐条匹配，不满足就跳过，连 HTTP 请求都不会发。
示例：只在桌面端加载大图，移动端用极简 SVG 占位：
<picture><source media="(min-width: 769px)" srcset="hero-large.webp" type="image/webp"><source media="(min-width: 769px)" srcset="hero-large.jpg" type="image/jpeg"> @@##@@ </source></source></picture>
-
-
media值是 CSS 媒体查询字符串，支持(min-width: 769px)、(orientation: landscape)等，但不支持 JavaScript 表达式或容器宽度 - 兜底的
src应该是最小、最快、最安全的资源
为什么不能靠 max-width 或 overflow 隐藏图片
有人试过给图片父容器设 max-width: 0 或 overflow: hidden，再配合 width: 100% 想“挤没”图片——这完全无效。
overflow: hidden 不改变图片尺寸，只裁剪溢出部分；max-width: 0 会让容器收缩，但图片若没设 max-width: 100% 或 height: auto，反而可能撑破布局或失真。
- 图片默认是
inline元素，width和heightHTML 属性会强制固定尺寸，CSS 中必须用max-width: 100%+height: auto才能响应式缩放 - 想“自动隐藏”，本质是控制是否渲染或是否请求——这两者都得靠
@media或 - 若用
transform: scale(0)或clip-path，图片仍在 DOM、仍加载、仍占内存，只是看不见，属于伪隐藏
容易被忽略的兼容性与语义陷阱
看似简单的隐藏，实际埋着几个硬坑：一是 display: none 会让 alt 文本彻底消失，SEO 和无障碍检查会报错；三是某些 CMS 或编辑器会把图片硬编码进 HTML，前端 CSS 隐藏后，服务端仍可能输出冗余 HTML。
- IE 用户占比虽低，但若业务涉及政企内网，得补
class控制显隐，再配object-fit保比例 - 隐藏非装饰性图片时，至少保留一个空
占位，或改用aria-hidden="true"+role="presentation"明确语义 - CDN 或 SSR 模板若预渲染了图片，前端 CSS 隐藏只是最后一道防线；真正省带宽，得从构建时生成多尺寸资源、服务端根据 UA 注入合适
srcset入手
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
