对CSS `object-fit` 属性的完美补全方案

最新推荐文章于 2024-07-31 22:31:29 发布

戴艺音

最新推荐文章于 2024-07-31 22:31:29 发布

阅读量405

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00074/article/details/138649094

版权

请注意，该项目已废弃并无法正常工作，但以下是它曾经提供的一些功能和应用的描述。

该项目是一个轻量级的解决方案，用于在不支持CSS object-fit 属性的浏览器中实现其功能。object-fit 属性可以定义内容图像（类似于CSS背景源的background-size）的尺寸模式，使得图像能够适应各种布局。

由于Microsoft Edge对获取匹配CSS规则的支持有限，以及其他一些难以解决的问题，这个polyfill对大部分项目可能帮助有限。现在，你可以考虑使用object-fit-images或fitie作为替代方案，它们都提供了对Edge的良好支持。

object-fit 的主要特性有：

填充（fill）：拉伸图像以完全适应指定尺寸，可能导致图像失真。
无（none）：保持图像自然大小，并居中显示，超出部分会被裁剪（需设置overflow: hidden）。
包含（contain）：按比例缩放图像，使其全部适应指定区域，保持原始比例（类似background-size: contain）。
覆盖（cover）：按比例缩放图像，直至每个像素都被覆盖，可能超出边界（需设置overflow: hidden），保持原始比例（类似background-size: cover）。

适用于任何需要控制图片缩放方式以适应不同容器尺寸的情况，例如：

此polyfill支持IE9+及所有主流浏览器。但是，原生支持object-fit的浏览器范围更广，可参考Can I use以获取最新信息。

为了使用这个polyfill，你需要：

<script>
objectFit.polyfill({
  selector: 'img', 
  fittype: 'cover',
  disableCrossDomain: 'true'
});
</script>

此外，该库还具备DOM监听功能，能自动处理动态添加的匹配元素。

要在本地进行测试，你需要通过服务器运行文件，而非直接从文件系统加载。关于第三方CSS和跨域问题，你可以调整CORS设置或者禁用解析外部CSS。

最后，这个项目由Anselm Hannemann和Christian "Schepp" Schaefer开发，他们都是前端领域的专家。虽然项目已经不再维护，但它为我们理解object-fit的工作原理以及如何模拟实现提供了宝贵的参考。

尽管如此，由于项目已废弃，我们建议你寻找其他替代品来满足你的需求。

关注

对CSS object-fit 属性的完美补全方案