图片高度缩小后变形，如何用CSS实现无拉伸适配？

核心方案：使用object-fit属性 #

这个CSS属性专门用于控制<img>这类替换元素在容器内的缩放行为，能严格保持图片原有比例，彻底避免拉伸变形。结合你的需求，推荐以下几种配置：

• object-fit: cover：图片按比例缩放至填满整个容器，超出容器的部分会被裁剪（适合需要完全覆盖容器、不介意边缘裁剪的场景）
• object-fit: contain：图片按比例缩放至完整显示在容器内，容器未被填满的区域会留空（适合需要完整展示图片全部内容的场景）
• object-fit: fill：默认值，会强制拉伸图片填满容器，这也是你之前出现变形的原因，不推荐使用

针对你的代码修改示例 #

以示例2为例，调整后的代码如下：

<div class="vec" style="width: 1080px; height: 442px;">
  <img src="https://i.ibb.co/DKtbQhs/White-Modern-Clean-Minimalism-Presentation.png" 
       alt="White-Modern-Clean-Minimalism-Presentation" 
       border="0" 
       style="width: 100%; height: 100%; object-fit: cover;">
</div>

关键说明：

1. 先给容器.vec明确设置目标尺寸1080px * 442px，确保容器尺寸固定
2. 图片设置width: 100%; height: 100%;让它占满容器空间
3. 添加object-fit: cover（或contain）保持图片比例，避免扭曲变形

补充优化点 #

如果需要控制图片在容器内的对齐位置，可以搭配object-position属性，比如object-position: top left让图片左上角对齐容器，默认值为center（居中对齐）。

内容的提问来源于stack exchange，提问作者chews