CSS img标签如何获取background属性及object-fit和object-position属性？

场景：

通常情况下，用户提交的照片与我们在展示时呈现的情况不同。我们展示图片时采用200 \times 200的比例（宽度与高度相同）。然而，用户提交的照片往往会出现比例失衡的情况：有时候会偏长、有时候则偏宽。

解决方案：

此时背景标签的作用得以凸显。具体而言，在此场景下可以选择调用背景位置属性：background-position: center;来将图片置于画面中央。同时还可以通过background-size: contain;这一设置来实现完整展示图片的效果。

从后方审视img标签时发现它不具备这一功能。仅能设定图片的宽度与高度。当图片的实际尺寸与显示尺寸不一致时会不可避免地出现变形现象因此今天为大家分享的是CSS3新增的一个特性并建议避免不必要的将img替换成background的操作。

一、object-fit：

说明：所选元素的内容应该如何使其适应指定容器的高度和宽度？同样适用于video标签。

属性值：

fill：填充默认值（Fill Default）。通过将替代表格进行扩展处理（Extend），使其完全覆盖整个content box而不必严格遵循原始的比例设置。
contain：维持原始大小设置（Size Preserve）。确保替代表格能够在其定义的区域内容纳下来（Accommodate Wit