> CSS 的 object-fit 属性用于指定一个元素内的替代内容（如 `<img>`、`<video>`、`<iframe>` 等）如何适应其容器框（容器的大小和形状）。 常用的 object-fit 取值有以下几种： - fill：默认值，将替代内容拉伸以填满容器框，可能会导致内容变形； - contain：将替代内容等比缩放以适应容器框，可能会留有空白区域； - cover：将替代内容等比缩放以填满容器框，可能会裁剪掉内容的一部分； - none：保持替代内容的原始尺寸，可能会溢出容器框； - scale-down：将替代内容缩小至其原始尺寸和 contain 中的较小者。 例如，如果希望一个图片在容器框中居中显示并保持其原始比例，可以使用以下 CSS 代码： ```css img { object-fit: contain; width: 100%; height: 100%; } ``` 此时，图片将等比缩放以适应容器框，并保持其原始比例。如果容器框的宽高比与图片的宽高比不同，可能会在容器框的顶部和底部留有空白区域。 > 需要注意的是，object-fit 属性不支持 IE 浏览器和旧版 Edge 浏览器，但可以使用 object-fit 的 polyfill 来实现类似的效果。