用<img>放Logo最直接，需加alt属性、vertical-align: middle防底部留白，推荐max-height配合height: auto等比缩放，Flex布局下设align-items: center即可居中，SVG内联更优且支持暗色模式。
导航栏里放图片当Logo，用 <img> 最直接
不用 JS、不依赖 CSS 框架，原生 HTML 就能搞定。关键是把 <img> 放进导航容器（比如 <nav> 或 <header>）里，而不是塞进 <a> 里再硬调样式——后者容易导致点击热区错位或语义混乱。
常见错误是写成这样：
<a href="/"><img src="logo.png"></a>看起来能用，但 Logo 缺少替代文本、缩放时易变形、屏幕阅读器无法识别其语义作用。
- 必须加
alt属性，值写品牌名，例如alt="MySite" - 推荐用
<picture>+<source>做响应式适配，尤其高 DPR 设备（如 Retina 屏） - 如果导航栏高度固定（比如
64px），给<img>加height和vertical-align: middle，避免基线对齐导致底部留白
CSS 控制图片尺寸和居中，别只靠 width: 100%
导航栏通常有背景色、内边距、行高等约束，width: 100% 容易撑满整个导航容器，反而让 Logo 变形或挤压菜单项。更稳妥的是用 max-height 配合 height: auto，让图片等比缩放。
示例代码：
nav img {<br> max-height: 32px;<br> height: auto;<br> vertical-align: middle;<br>}
立即学习“前端免费学习笔记（深入）”；
-
max-height比height更安全：图片原始高度小于设定值时不会被拉伸 - 务必设
vertical-align: middle，否则<img>默认按 baseline 对齐，会在下方留出约 4px 空隙 - 如果导航用 Flex 布局（推荐），直接对
<nav>设display: flex; align-items: center，图片无需额外垂直调整
SVG 格式 Logo 更适合导航栏
比起 PNG/JPEG，SVG 在小尺寸下清晰度更高、体积更小、支持 CSS 填色（方便暗色模式切换），且可内联嵌入 HTML，减少 HTTP 请求。
- 内联 SVG 写法：
<nav><br> <svg width="120" height="24" viewBox="0 0 120 24" aria-label="MySite"><br> <path d="..." fill="#000"/><br> </svg><br></nav>
- 必须加
aria-label或title元素，补足无障碍语义 - 避免用
<img src="logo.svg">引入 SVG：丢失内联控制能力，也无法用 CSS 修改颜色 - 若需动态换色（如悬停变蓝），只能用内联 SVG +
fill: currentColor
移动端折叠菜单下 Logo 显示异常？检查媒体查询断点
很多项目在桌面端正常，一缩到手机就发现 Logo 被截断、错位或消失——大概率是媒体查询里写了 display: none 或重置了 flex 方向，却没同步调整 Logo 的尺寸或定位逻辑。
- 检查是否在
@media (max-width: 768px)中误删了nav img规则 - 如果用了
object-fit: contain，注意部分老 Android 浏览器不支持，降级用max-width+height: auto - 折叠菜单按钮（hamburger）和 Logo 同级时，确保它们共用同一套 Flex 排列逻辑，别一个用
float一个用flex
最常被忽略的点：没有为 Logo 图片设置明确的 max-width 上限，导致在窄屏上强行撑宽导航栏，触发横向滚动条。这个细节在真机调试时才容易暴露。
