如何为任意元素实现object-fit: contain/cover/fill效果？

我整理了一套能适配任意HTML元素（比如div、span这类都能用）的图片缩放逻辑，核心目标如下：

• 代码需适用于任意元素（div、span等）
• contain：在保持宽高比且不超出容器的前提下，尽可能填充空间
• cover：在保持宽高比且不留空隙的前提下，尽可能填充空间
• fill：尽可能填充空间（无需保持宽高比）

不同宽高比下的效果展示 #

下面是竖版、横版不同宽高比场景下的效果呈现：

内容的提问来源于stack exchange，提问作者kess