推荐用 object-fit 控制图片缩放裁剪：cover 保持比例裁剪溢出，contain 完整显示留白；需配合 width/height 或 aspect-ratio 生效，IE 需 fallback；容器应优先锁定宽高比，避免硬编码 HTML 尺寸；SVG 等非位图需单独处理。
用 object-fit 控制图片裁剪与缩放行为
默认情况下，
推荐直接使用 object-fit 配合固定容器尺寸：
-
object-fit: cover—— 保持宽高比，裁掉溢出部分（最常用，类似 CSS 背景的background-size: cover） -
object-fit: contain—— 完整显示整张图，留白（适合证件照、图标等需全貌的场景） - 必须配合
width和height（或aspect-ratio）才生效，仅设max-width: 100%不起作用 - IE 不支持，如需兼容可 fallback 到 background-image 方案
用 aspect-ratio 锁定容器比例，避免图片被压扁
即使设置了 object-fit: cover，如果父容器本身宽高不定（比如 flex 项或 grid 单元格），图片仍可能因容器形变而“忽高忽宽”。这时应优先约束容器比例。
现代方案（Chrome 88+、Firefox 89+、Safari 15.4+）：
立即学习“前端免费学习笔记（深入）”；
.card-img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}旧版兼容写法（需额外 wrapper）：
云枫企业网站第四版1.0
下载
云枫工作室企业网站第四版是由云枫工作室独立开发的一个适用于普通企业的网站展示系统.系统环境:asp+access(注：网站风格是与其它版本不相同的，并不是其它版本的升级版)网站功能主要有图片管理系统、信息管理系统、产品管理系统、留言信息管理使用步骤1、把网站源代码拷贝到服务器空间的根目录下。（注：服务器空间需支持ASP脚本运行）2、网站后台地址为http://您的域名/admin/index.as
.aspect-box {
position: relative;
width: 100%;
padding-top: 75%; /* 4:3 → 3/4 = 0.75 */
}
.aspect-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}批量处理时慎用 width/height 属性硬编码
在 HTML 中直接写 
- 响应式失效：无法随容器缩放，可能溢出或过小
- 宽高比锁定错误：若原图不是 4:3，强制设值会导致浏览器拉伸失真
- 维护成本高：每换一批图就得重算所有尺寸
正确做法是：只在 CSS 中控制容器尺寸和 object-fit，HTML 里保留原始宽高属性（或干脆去掉），由浏览器按需渲染。
SVG 或图标类图片需单独处理
SVG、字体图标、纯色 icon 等本质不是位图，套用 object-fit 无效。它们的“风格统一”依赖另一套逻辑：
- 统一用
内联，并设置width/height或viewBox保证缩放一致性 - 用
currentColor填充颜色，使其继承文字色，便于主题切换 - 避免混用不同来源的 SVG：有的带内联
style，有的含冗余defs，会导致渲染节奏不一致
例如：
实际效果是否“一致”，不取决于图片本身是否相同，而取决于容器约束、缩放策略、加载时机三者是否可控。最容易被忽略的是：未监听 load 事件就操作尺寸，或在 JS 动态插入图片后忘记触发重绘。
