必须联合使用aspect-ratio、object-fit和flex-shrink: 0：aspect-ratio设在导航项容器上锁定宽高比，object-fit配合width/height:100%控制图片填充方式，flex-shrink: 0防止flex默认压缩导致变形。
不用 JavaScript 也能做图片导航栏，但「图片自适应宽高比+点击区域不塌陷+小屏下不溢出」这三点必须靠 CSS 的 aspect-ratio、object-fit 和 flex-shrink: 0 联合控制——漏掉任意一个，图片就会拉伸、裁切或把整个导航栏撑开。
图片导航项怎么保持固定宽高比
直接给 <img> 设 width: 100% 会导致高度随容器变化而失真；用 height: auto 又无法约束比例。正确做法是让父容器承载比例逻辑：
- 导航项用
<a></a>包裹<img>，给a设aspect-ratio: 1 / 1（正方形图标）或4 / 3（横图） -
img设width: 100%; height: 100%; object-fit: cover;，确保填满且不拉伸 - 避免在
img上写height或max-height，它会和aspect-ratio冲突
移动端图片导航横向滚动时卡顿或错位
常见于用 overflow-x: auto 滚动的图片导航栏，尤其在 iOS Safari 上滑动生硬、回弹异常。根本原因是没触发硬件加速，且未处理 touch 行为：
- 给滚动容器加
scroll-behavior: smooth;和-webkit-overflow-scrolling: touch;（iOS 旧版必需） - 必须设
will-change: scroll-position;，否则 GPU 不接管滚动 - 别用
display: inline-block排图，改用display: flex; flex-wrap: nowrap;，再给每项加flex: 0 0 auto;防缩放 - 若图片带文字标签，标签用
position: absolute，其父a必须有position: relative;，否则定位漂移
图片链接点击无反馈或跳转失败
图片导航本质仍是链接，但很多人去掉 href 改用 onclick，结果在键盘导航、右键新标签打开、SEO 中全部失效：
- 每个
<a></a>必须有有效href，哪怕只是href="https://www.php.cn/link/53a9f8cd4872ab6ef7e09a25b1bdb1e8"，并配合id="home"锚点降级可用 - 不要写
href="javascript:void(0)"，它会中断浏览器默认行为且无障碍支持差 - 若需 JS 控制跳转，用
event.preventDefault()+history.pushState()，但保留href值供爬虫和读屏器识别 - 图片本身加
alt属性，内容要描述功能（如 "首页入口图标"），不是单纯“logo”
Flex 布局下图片导航在窄屏被压缩变形
桌面端看着正常，一到 iPhone 就发现图标变扁、文字重叠——这是 flex-shrink: 1 默认生效导致的：
- 导航容器
nav ul设display: flex; flex-wrap: nowrap; - 每个
li或a加flex: 0 0 auto;，禁止缩放，宽度由图片内容决定 - 避免设
min-width在nav上，它会锁死 flex 压缩能力，导致横向溢出 - 小屏断点用
@media (max-width: 768px)切换为垂直堆叠：flex-direction: column;，而非强行保持横排
最易被忽略的是：图片导航的语义层级不能断。如果用 div 替代 a，再套一层 span 包图片，屏幕阅读器就认不出这是可跳转入口；而 aspect-ratio 在 Safari 15.4+ 才完全支持，老版本需用 padding-top 百分比 hack 备份——这些细节不处理，用户看不见，但真实存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
