在 display: flex 容器中，通过统一设置父容器的 font-size 和 line-height，并利用 em 单位使图片高度继承容器计算后的高度，可精准实现图片与输入框（如 ）等高对齐。
在 `display: flex` 容器中，通过统一设置父容器的 `font-size` 和 `line-height`，并利用 `em` 单位使图片高度继承容器计算后的高度，可精准实现图片与输入框（如 ``）等高对齐。
在 Flex 布局中，让子元素（如 ）动态匹配同级可变高度元素（如 font-size 驱动的 ）的高度，是一个常见但易被误解的挑战。直接对图片设置 height: 100% 通常无效，因为其父元素（.flag）未定义明确高度，而 100% 在无参考高度时无法解析。
核心思路：将高度控制权上收至 Flex 容器，并用相对单位建立可继承的高度基准。
由于 的视觉高度主要由 font-size 和 line-height 决定，我们可以将 .container 设为统一的字体上下文——通过设置 font-size 和 line-height，再用 height: 1.2em（等价于 line-height × font-size）显式定义容器主轴高度。此时，1em = 50px，1.2em = 60px，即容器高度稳定为 60px。
接着，将图片设为 height: 100% 并添加 display: block（避免默认行内间隙），它便能准确拉伸至容器高度；同时让 继承父级字体属性，确保自身高度与容器一致：
.container {
display: flex;
padding: 10px;
background-color: lightgray;
font-size: 50px; /* 基准字号 */
line-height: 1.2; /* 行高倍数 */
height: 1.2em; /* 精确等于 input 实际高度 */
}
.container img {
height: 100%;
display: block; /* 消除底部空白 */
object-fit: cover; /* 可选：保持宽高比缩放填充 */
}
.input > input {
font-size: inherit;
line-height: inherit;
width: 100%;
border: 0;
outline: none;
}
✅ 关键优势：
- 无需 JavaScript，纯 CSS 响应式方案；
- 高度随 font-size 变化自动同步，便于主题或响应式调整；
- 兼容所有现代浏览器（1lh 单位虽更语义化，但目前支持有限，1.2em 是稳妥替代）。
⚠️ 注意事项：
- 图片原始宽高比可能失真，建议配合 object-fit: cover 或 contain 控制裁剪/缩放行为；
- 若输入框需内边距或边框，请将其纳入 line-height 计算，或改用 box-sizing: border-box + 显式 height；
- 避免在 .flag 或 .input 上设置 flex: 1 等弹性值干扰高度继承，优先由 .container 统一约束主轴尺寸。
此方法将布局逻辑从“子元素适配”转为“容器定义基准”，简洁、可靠且符合 CSS 设计哲学。
