图片拉伸的根源是父容器宽度变化且未设尺寸约束，解决方法是设置 img { max-width: 100%; height: auto; }，并确保父容器清除浮动、宽度稳定，避免全局样式或弹性布局干扰。
在浮动布局中，图片被拉伸通常是因为父容器宽度变化后，图片没有设置合理的尺寸约束，浏览器默认按原始尺寸或100%宽渲染，导致失真。最直接有效的解决方式，就是给图片设置 max-width: 100%，同时确保 height: auto。
为什么 max-width: 100% 能解决问题
浮动元素本身不参与文档流高度计算，其父容器容易塌陷或宽度不稳定；此时若图片未设限制，可能被强制撑开或压缩。max-width: 100% 表示图片最大宽度不超过其父容器的可用宽度，且优先保持原始宽高比（配合 height: auto），从而避免拉伸变形。
必须搭配 height: auto 使用
仅设 max-width 不够，如果同时写了 height: 100% 或固定高度，图片仍会变形。正确写法是：
img {
max-width: 100%;
height: auto;
}
注意父容器的宽度行为
浮动布局中，父容器若未清除浮动或未设定明确宽度，可能导致内部图片计算基准异常。建议：
立即学习“前端免费学习笔记（深入）”；
- 为浮动父容器添加 overflow: hidden 或使用 clearfix 清除浮动
- 避免给图片父元素设置过宽的 padding/margin，影响可用宽度计算
- 如需响应式效果，可额外加 width: 100%，但不是必须（max-width: 100% 已足够）
其他常见干扰因素
有时拉伸问题并非来自浮动本身，而是以下原因：
- 图片被包裹在
<figure></figure>或自定义容器中，该容器设置了 display: flex / grid 并启用了 align-items: stretch - CSS 中存在全局 img 样式如
img { width: 100%; height: 100%; }，覆盖了正常比例 - 图片 src 是 base64 或动态加载，初始无尺寸，触发了错误渲染
