ie11中flex图片拉伸变形是align-items: stretch、flex-shrink: 1及object-fit支持有限三者叠加所致；需用-ms-flex: 0 0 auto、width: auto、height: auto、min-width: 0组合稳住外框，再谨慎使用object-fit。
IE11 中 Flex 布局下图片拉伸变形，不是图片本身写错了，而是 align-items: stretch 默认行为 + flex-shrink: 1 + IE11 对 object-fit 的有限支持三者叠加导致的。直接加 object-fit: cover 没用，必须先稳住外框。
IE11 默认 align-items: stretch 会垂直拉伸图片
Flex 容器主轴为 row（默认）时，交叉轴是垂直方向，align-items: stretch 会让 <img> 强行撑满容器高度，彻底破坏宽高比。
- 显式覆盖：给图片父容器加
align-items: flex-start或align-items: center - 别在
<img>上写height: 100%或flex: 1，这会加剧拉伸 - 如果父容器是
flex-direction: column，注意此时交叉轴是水平方向，要检查justify-content是否过度约束了宽度
flex-shrink: 0 在 IE11 中必须配 -ms- 前缀
IE11 识别标准 flex-shrink: 0，但若你用了 Autoprefixer 或旧项目混写了 IE10 兼容代码，可能漏掉关键声明；更常见的是：只写了 flex-shrink: 0 却没关掉 flex-basis 的干扰。
- 安全写法：用
flex: 0 0 auto，再手动补 IE10/11 兼容：-ms-flex: 0 0 auto;flex: 0 0 auto; - 避免
flex-basis: 100%或flex-basis: 200px—— 前者极易拉伸，后者在窄屏下溢出 - IE11 中
flex-basis: auto行为基本可靠，但必须配合width: auto; height: auto;，否则 CSS 重置可能覆盖图片固有尺寸
object-fit 在 IE11 中部分生效但不可靠
IE11 支持 object-fit，但仅限于部分场景：它要求图片已有稳定宽高（即外框已锁定），且不能与 height: auto 冲突；一旦外框塌陷，object-fit 就变成“在一条线上裁图”。
- 生效前提：图片是直接 flex item（父元素
display: -ms-flexbox或display: flex），且已设width: 100%; height: 100% - 不要和
max-width: 100%; height: auto混用——二者计算逻辑冲突，IE11 会优先按height: auto推算，导致height: 100%失效 - 兼容兜底：若必须保比例且不接受降级，改用
background-image方案：div { background-image: url(...); background-size: cover; background-position: center; background-repeat: no-repeat; }
嵌套 Flex 中图片被压成竖线？查 min-width: 0
多层 Flex 嵌套（如卡片 → 内容区 → 图片区）时，IE11 和现代浏览器一样，默认给替换元素（<img>）设 min-width: auto，拒绝缩太小——结果就是图片被压成细长竖线。
- 解决方案：在
<img>自身或其**直接父容器**上加min-width: 0 - 完整防变形组合（IE11 可用）：
img { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; height: auto; min-width: 0; } - 调试时打开 IE11 开发者工具，检查 Computed 面板中
flex-shrink是否真为0，且display确实是-ms-flexbox或flex
真正容易被忽略的是：IE11 中 flex-direction: column 遇上 min-height 时，子项的 flex: 1 经常不占满剩余空间，必须给父容器加 height: 100% 或 min-height: 1px 才能触发 BFC；这个点漏掉，整个图片区域就悬空了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
