在css中防止图片拉伸变形的核心做法是设置 object-fit 属性。该属性允许容器保持固定尺寸，同时让内部图片根据设定模式（如覆盖或包含）自动调整缩放比例，从而避免被强行挤压或拉长。只需将目标元素的 object-fit 设为 cover 即可实现等比填充且不变形。
object-fit: cover 如何裁剪多余部分
当使用 cover 值时，浏览器会计算图片宽高比与容器宽高比的差异。如果图片较宽，它会沿垂直方向放大直到填满高度，超出容器的上下边缘部分会被直接裁切；如果图片较高，则沿水平方向放大并裁切左右两侧。这种模式下图片始终充满容器且不变形，但可能丢失画面边缘内容。
<div style="width: 300px; height: 200px; overflow: hidden;"> @@##@@ </div>
上述代码定义了一个 300x200 像素的容器，图片通过 width: 100% 和 height: 100% 强制占据整个空间。由于设置了 object-fit: cover，图片不会拉伸，而是按比例缩放至至少一边贴合容器边界，多余部分由父级的 overflow: hidden 处理。预期结果是图片填满容器且无变形，若原图比例非 3:2，则会有部分区域不可见。
object-fit: contain 如何保留完整画面
使用 contain 值时，浏览器会确保图片完整显示在容器内。它会将图片按比例缩小，直到图片的宽度或高度之一刚好触及容器边界，另一侧则留有空白。这种模式适合需要展示全貌的场景，但容器内可能出现留白。
<div style="width: 300px; height: 200px; background: #eee;"> @@##@@ </div>
此段代码同样使用 300x200 容器，但 object-fit: contain 会让图片保持完整。若原图比例为 4:3，图片将适应高度后在左右两侧留出灰色背景。预期结果是图片完整可见，无裁切，但容器未被完全填充。
未设置 object-fit 时的默认行为
如果不设置 object-fit，图片将遵循默认的 fill 行为。此时图片会忽略原始宽高比，强行拉伸以匹配容器的 width 和 height。这通常导致图片严重变形，例如圆形变成椭圆。因此，只要希望保持比例，就必须显式指定 object-fit 为 cover、contain 或其他非 fill 的值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
