当元素设为百分比宽度时，其尺寸始终相对于直接父容器宽度而非视口，Flex 容器默认不拉伸子项、也不自动继承父级 100% 宽度——这是图片“意外缩小”的根本原因。

当元素设为百分比宽度时，其尺寸始终相对于直接父容器宽度而非视口，flex 容器默认不拉伸子项、也不自动继承父级 100% 宽度——这是图片“意外缩小”的根本原因。

在 Flex 布局中，.navbar-left_img 的 width: 12.3% 并非指向视口（viewport）宽度，而是严格依据其最近的块级包含块（即 .navbar-left 或 .navbar）的实际渲染宽度来计算。虽然你为 .navbar 设置了 width: 100%，但若其祖先元素（如

、）未显式声明 width: 100% 或 max-width: none，浏览器会按默认行为限制宽度（例如 body 默认有 margin，html/body 默认不占满视口），导致 .navbar 实际宽度

更关键的是：Flex 容器本身不会强制子项按百分比参考视口。即使 .navbar 宽度正确，.navbar-left_img 的父元素是 标签（行内元素），而 默认不生成块级盒，其宽度由内容决定——这意味着 12.3% 实际是相对于一个极窄的 宽度，而非 .navbar。

✅ 正确解法分三步：

1. 重置根级宽度链（确保视口穿透）：

   html, body {
   width: 100%;
   margin: 0;
   padding: 0;
   }

2. 让中间容器成为可靠参照系：
   将 .navbar-left 设为 flex 或 block，并明确设宽（或使用 flex: 1）；同时避免 成为百分比计算的父容器：

   .navbar-left {
   flex: 0 0 auto; /* 防止被压缩 */
   width: 100%;     /* 显式占满 */
   }
   /* 推荐：直接控制 img 父容器，而非依赖 <a> */
   .navbar-left > a {
   display: block;
   width: 100%;
   }</a>

3. 更健壮的图片尺寸方案（推荐替代写法）：
   ✦ 使用 vw 单位直接锚定视口：

   .navbar-left_img {
     width: 12.3vw; /* 12.3% of viewport width */
     padding-top: 2vh;
     padding-left: 3vw;
   }

   ✦ 或用 Flex 主轴控制 + flex-shrink: 0 防压缩：

   .navbar {
     display: flex;
     width: 100vw; /* 明确基于视口 */
     align-items: center;
   }
   .navbar-left {
     flex: 0 0 auto; /* 不伸缩、不收缩 */
   }
   .navbar-left_img {
     width: 12.3vw;
     height: auto;
   }

⚠️ 注意事项：

• padding-top: 2% 在 Flex 容器中仍以父容器宽度为基准（CSS 规范规定所有方向的百分比 padding/margin 均相对父容器宽度），若需垂直比例，请改用 vh；
• 图片原始尺寸过小会导致 vw 缩放后模糊，建议提供高倍图并配合 image-rendering: -webkit-optimize-contrast 优化；
• 始终检查 DevTools 中 .navbar-left_img 的 computed width，确认其父容器（Computed → Layout）是否真正达到预期像素值。

总结：Flex 本身不改变百分比计算规则，它只是改变了布局模型。解决“意外缩小”的核心是——厘清百分比的参照容器，并主动控制该容器的宽度来源。用 vw/vh 替代 % 是最直接、最可控的响应式图像方案。