使用 CSS 的 object-fit 或 max-width/max-height 组合，可在不拉伸变形的前提下将图片适配指定容器高度，尤其适用于响应式布局中固定宽高比容器内的图像展示。
使用 css 的 `object-fit` 或 `max-width`/`max-height` 组合，可在不拉伸变形的前提下将图片适配指定容器高度，尤其适用于响应式布局中固定宽高比容器内的图像展示。
当图片原始尺寸（如 1080×601）与目标容器尺寸（如 1080×442）宽高比不一致时，仅设置 width: 100%; height: 75vh 会导致图像被强制拉伸，文字、图标等细节严重失真。根本原因在于：默认的 <img> 元素会按比例缩放，但显式声明 height 会覆盖该行为，破坏宽高比约束。
✅ 推荐方案一：object-fit: cover（推荐用于封面图、横幅图）
该属性让图片按比例缩放并完全覆盖容器，超出部分自动裁剪，确保无拉伸、无留白：
<div class="vec">
<img
src="https://i.ibb.co/DKtbQhs/White-Modern-Clean-Minimalism-Presentation.png"
alt="Modern presentation banner"
style="width: 100%; height: 75vh; object-fit: cover;">
</div>⚠️ 注意：cover 可能裁剪图片边缘，需确保关键内容居中（可配合 object-position: center center 控制裁剪锚点）。
✅ 推荐方案二：max-width + max-height（推荐用于需完整显示的场景）
此组合保留图片原始比例，使其在不超过容器宽高的前提下尽可能大显示，常留上下或左右空白，但绝不变形：
<div class="vec">
<img
src="https://i.ibb.co/DKtbQhs/White-Modern-Clean-Minimalism-Presentation.png"
alt="Modern presentation banner"
style="max-width: 100%; max-height: 75vh;">
</div>? 补充说明：
- 避免同时设置 width 和 height（除非图片与容器宽高比严格一致）；
- object-fit 仅对 <img> 和 <video> 生效，不适用于 background-image；
- 若需兼容 IE，object-fit 需 polyfill（如 object-fit-images），此时建议降级使用 max-width/max-height 方案；
- 建议为 <img> 添加 alt 属性并设置明确宽高（或 aspect-ratio）以避免布局偏移（CLS）。
综上，object-fit: cover 是解决“缩高不失真”问题最简洁高效的现代方案；若需保证图像完整性，则优先选用 max-width/max-height 组合。
