图片拉伸的根源是父容器宽度变化且未设尺寸约束，解决方法是设置 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% 已足够）

其他常见干扰因素

有时拉伸问题并非来自浮动本身，而是以下原因：

• 图片被包裹在
  或自定义容器中，该容器设置了 display: flex / grid 并启用了 align-items: stretch
• CSS 中存在全局 img 样式如 img { width: 100%; height: 100%; }，覆盖了正常比例
• 图片 src 是 base64 或动态加载，初始无尺寸，触发了错误渲染