图片在flex容器中被拉伸的直接原因是Flexbox默认使子项参与弹性伸缩，尤其当父容器设flex:1或align-items:stretch时，img会强行撑满交叉轴高度且破坏固有宽高比。
图片在 flex 容器里被拉伸的直接原因
Flexbox 默认会让子项（包括 <img>）参与弹性伸缩，尤其当父容器设置了 flex: 1 或 align-items: stretch 时，<img> 会强行撑满交叉轴高度，同时若未设 width/height，其固有宽高比就被破坏。
常见现象：图片看起来“胖了”或“扁了”，控制台里看到元素尺寸远大于原始分辨率。
用 flex-shrink: 0 阻止图片被压缩
这是最常被忽略的一环。即使你写了 width: 200px，只要父容器是 display: flex 且没禁用收缩，图片仍可能被压窄（尤其在空间不足时）。
img {
flex-shrink: 0;
width: 200px;
height: auto;
}
-
flex-shrink: 0 告诉 flex 容器：“别动我的宽度”
-
height: auto 是必须搭配的，否则 width 单独设可能失效或导致比例错乱
- 如果需要等比缩放适配容器，改用
max-width: 100% + height: auto，而非固定 width
避免 align-items: stretch 拉高图片
Flex 容器默认 align-items: stretch，会让所有子项（含图片）拉伸到容器最大高度。哪怕图片本身只有 50px 高，也会被硬拉成 200px。
.container {
display: flex;
align-items: flex-start; /* 改成这个 */
/* 或者 align-items: center; */
}
- 除非你明确需要图片填满高度，否则不要保留
stretch
-
flex-start 让图片按自身高度对齐顶部，最安全
- 如果用了
object-fit（如 object-fit: cover），那 align-items 的影响会被覆盖，但前提是已显式设了 height
更稳妥的做法：包裹一层 <div> 并设 min-width
有时候直接操作 <img> 还是会受父级 flex 属性干扰，尤其在响应式嵌套中。这时把图片包进一个容器，控制权更清晰：
<div class="img-wrapper">
<img src="logo.png" alt="logo">
</div>
.img-wrapper {
flex-shrink: 0;
min-width: 0; /* 防止 flex 把它压成 0 */
}
.img-wrapper img {
width: 100%;
height: auto;
display: block;
}
-
min-width: 0 是关键——flex 项默认最小宽度是内容宽度，但某些浏览器对空内容或图片计算异常，加这一句防意外坍缩
-
display: block 消除图片默认的基线对齐（baseline）带来的底部空白
- 这种结构也方便后续加圆角、阴影、hover 效果，而不污染图片样式
flex-shrink: 0 告诉 flex 容器：“别动我的宽度”height: auto 是必须搭配的，否则 width 单独设可能失效或导致比例错乱max-width: 100% + height: auto，而非固定 width
align-items: stretch 拉高图片
Flex 容器默认 align-items: stretch，会让所有子项（含图片）拉伸到容器最大高度。哪怕图片本身只有 50px 高，也会被硬拉成 200px。
.container {
display: flex;
align-items: flex-start; /* 改成这个 */
/* 或者 align-items: center; */
}- 除非你明确需要图片填满高度，否则不要保留
stretch -
flex-start让图片按自身高度对齐顶部，最安全 - 如果用了
object-fit（如object-fit: cover），那align-items的影响会被覆盖，但前提是已显式设了height
更稳妥的做法：包裹一层 <div> 并设 min-width
有时候直接操作 <img> 还是会受父级 flex 属性干扰，尤其在响应式嵌套中。这时把图片包进一个容器，控制权更清晰：
<div class="img-wrapper">
<img src="logo.png" alt="logo">
</div>
.img-wrapper {
flex-shrink: 0;
min-width: 0; /* 防止 flex 把它压成 0 */
}
.img-wrapper img {
width: 100%;
height: auto;
display: block;
}
-
min-width: 0 是关键——flex 项默认最小宽度是内容宽度，但某些浏览器对空内容或图片计算异常，加这一句防意外坍缩
-
display: block 消除图片默认的基线对齐（baseline）带来的底部空白
- 这种结构也方便后续加圆角、阴影、hover 效果，而不污染图片样式
min-width: 0 是关键——flex 项默认最小宽度是内容宽度，但某些浏览器对空内容或图片计算异常，加这一句防意外坍缩display: block 消除图片默认的基线对齐（baseline）带来的底部空白实际项目里，拉伸问题往往不是单一设置能解决的，而是 flex-shrink、align-items、width/height 三者共同作用的结果。漏掉任意一个，都可能让图片在某个断点或嵌套层级下突然变形。
