使用 CSS 的 object-fit 或 max-width/max-height 组合，可在限定容器尺寸时让图片按比例缩放、避免失真，适用于响应式布局中的图片适配场景。
使用 css 的 `object-fit` 或 `max-width`/`max-height` 组合，可在限定容器尺寸时让图片按比例缩放、避免失真，适用于响应式布局中的图片适配场景。
在 Web 开发中，当需要将一张原始尺寸为 1080×601 的图片严格放入一个 1080×442 的容器（如
）中时，若仅设置 width: 100%; height: 75vh; 或 max-height: 75vh，浏览器默认会强行拉伸图片以填满指定高度，导致图像纵向压缩、文字和细节严重变形——这正是 object-fit 解决的核心问题。
✅ 推荐方案：object-fit: cover
object-fit 是专为替换元素（如 和
- object-fit: cover：保持宽高比，等比缩放并裁剪溢出部分（类似背景图的 background-size: cover），确保容器被完全填满且无拉伸；
- object-fit: contain：保持宽高比，完整显示整张图（可能留白）；
- object-fit: fill（默认值）：强制拉伸填充，会导致失真，应避免。
✅ 正确用法示例：
<div class="vec"> <img src="https://i.ibb.co/DKtbQhs/White-Modern-Clean-Minimalism-Presentation.png?x-oss-process=image/resize,p_40" alt="Modern presentation slide" style="max-width:90%"> </div>
⚠️ 注意：object-fit 需配合明确的 width 和 height（而非仅 max-*）才能生效；同时确保父容器具有确定高度（如 vh、px 或 flex 布局约束），否则高度可能塌陷。
✅ 备选方案：max-width + max-height 自动等比缩放
若希望图片完整可见（不裁剪），可改用 max-width 与 max-height 组合，让浏览器自动选择约束维度进行等比缩放：
<div class="vec"> <img src="https://i.ibb.co/DKtbQhs/White-Modern-Clean-Minimalism-Presentation.png?x-oss-process=image/resize,p_40" alt="Modern presentation slide" style="max-width:90%"> </div>
此时图片将按原始宽高比缩放，优先满足宽度 ≤100% 且高度 ≤75vh，不会拉伸，但可能出现上下或左右留白。
? 补充建议
- 避免混用 border="0" 等过时 HTML 属性，推荐统一用 CSS 控制样式（如 border: none）；
- 若需兼容 IE（已不推荐），object-fit 需借助 polyfill（如 object-fit-images）；
- 对于语义化与可访问性，始终保留 alt 属性，并确保图片内容与上下文相关。
综上，object-fit: cover 是解决“缩放失真”最直接、高效的方式；而 max-width/max-height 更适合需保留全图信息的场景。根据设计目标灵活选用，即可兼顾视觉保真与布局一致性。
