object-fit本身不防止拉伸，仅在已有明确尺寸的容器中控制缩放；若img或其父容器缺少可计算宽高（如height未设、flex子项无height:100%、img-fluid冲突、未加display:block），则无“盒子”可填，导致失效。
object-fit 本身不防止拉伸，它只在“已有明确尺寸的容器”里控制缩放行为。没这个容器，它就完全不工作。
为什么写了 object-fit: cover 还是拉伸？
不是属性写错了，而是浏览器根本没“盒子”可填——img 或其父容器缺少可计算的宽高基准。
-
img只设了width: 100%，但height是auto或未声明 → 高度由原始图撑开，object-fit失效 - 父容器是
display: flex，子项没设height: 100%或min-height→ 加载中高度塌陷为 0 - 用了 Bootstrap 的
img-fluid类 → 它带height: auto，和object-fit: cover冲突 - 忘了加
display: block→img默认是 inline 元素，基线留白干扰实际高度计算
必须配合哪些 CSS 才让 object-fit 生效？
三要素缺一不可：可测量的容器、明确的图片尺寸、可控的溢出边界。
- 容器（
img自身或其父元素）要有可计算尺寸：width: 100%+aspect-ratio: 16 / 9（推荐），或width: 100%+height: 200px -
img必须设width: 100%和height: 100%（不能只靠父容器撑高） - 加
display: block消除行内间隙；父容器加overflow: hidden（尤其用cover时，否则裁剪部分会溢出）
cover 和 contain 到底怎么选？
这不是风格偏好，而是内容语义决定的：这张图里，哪部分绝对不能丢？
Kibana Saved Objects
下载
通过 REST API 管理 Kibana 保存的对象（仪表板、Lens 可视化等）。适用于：① 以编程方式创建、更新、删除仪表板和 Lens 可视化。
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放后填满、裁剪边缘 → 适合轮播封面、卡片图、头像。但默认object-position: center center可能切掉人脸，必须配object-position: center top或具体偏移值 -
object-fit: contain：等比缩放后完整显示、留白补足 → 适合证件照、UI 图标、技术配图。此时object-position几乎无效，因为整张图都在可视区内 -
object-fit: fill就是强制拉伸，和不写object-fit效果一致 → 除非刻意做故障效果，否则一律避免
iOS Safari 13.3 及更早版本怎么兜底？
这不是样式没加载，而是引擎级不识别：object-fit 在 iOS Safari 13.3 及之前完全不生效，加 -webkit-object-fit 也无效，会退化成 fill 行为（即拉伸）。
- 稳妥降级：用
background-image+background-size: cover替代，但会丢失alt、SEO 和原生懒加载 - 渐进增强：用
@supports (object-fit: cover)包裹现代写法，再给不支持环境写降级规则 - 关键场景（如头像）建议服务端裁剪，返回固定比例图片，规避前端适配问题
真正容易被忽略的点是：你写的每一条 object-fit 规则，背后都依赖一个稳定、可测量的渲染上下文——这个“框”必须由你亲手定义，浏览器不会替你算。
