ie中img设max-width:100%仍变形是因父容器未触发haslayout，需加zoom:1或min-height:1px；ie8及以下不支持height:auto与width:100%联动，须显式写height:auto!important且顺序在后；srcset需保留src fallback；object-fit无效，应改用背景图或容器裁剪。
IE中img设max-width: 100%仍拉伸变形？检查父容器是否触发了IE的“hasLayout”问题
IE6–8对max-width的支持依赖父元素是否具备layout，否则图片会无视约束强行撑开。这不是CSS写错了，而是IE渲染机制的老毛病。
- 常见错误现象：
img在IE中宽高比例失真，尤其嵌套在div里且该div没设height或zoom: 1 - 解决方式：给图片直接父容器加
zoom: 1（触发hasLayout），或min-height: 1px（更安全） - 不要用
overflow: hidden硬切——它可能截掉图片底部，尤其当图片有下边距时
用width: 100%代替max-width: 100%时，IE8及以下会忽略height: auto
IE8及更早版本不支持height: auto与width: 100%联动，导致图片高度塌陷或按原始尺寸拉伸。
- 必须显式设置
height: auto !important，且放在width: 100%之后（IE解析顺序敏感） - 更稳妥做法是改用
width: 100%+height: auto+vertical-align: middle（避免行内基线间隙引发的额外高度） - 如果父容器是
display: table-cell，IE7–8会彻底失效，换回block布局
响应式图片在IE中无法加载srcset？得用picture polyfill或降级方案
IE11都不支持srcset和picture，所有现代响应式图片语法在IE里直接退化为src，但若没设src，图片就空白。
- 必须保留
src属性作为fallback，例如：<img src="small.jpg" srcset="large.jpg 1200w, medium.jpg 768w"> - 不要只靠JS检测屏幕宽度再动态改
src——IE8没有matchMedia，且DOM ready时机不稳定 - 推荐用
picturefill（轻量polyfill），但注意它依赖data-srcset写法，需配合HTML结构改造
IE中object-fit: cover完全无效，替代方案只能靠容器裁剪+背景图
IE全系不支持object-fit，想实现“图片居中裁剪”，不能靠CSS，得换思路。
- 把
img换成div，用background-image+background-size: cover+background-position: center - 记得加
background-repeat: no-repeat，否则IE6–7默认平铺 - 如果必须用
img标签（比如SEO或可访问性要求），就用绝对定位+overflow: hidden容器模拟裁剪，但要手动算好宽高比，不然IE9以下可能错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
