Img的object-position、object-fit属性

偶然翻到img的这两个属性，觉得很有用，可以了解一下用到项目中去

object-position

css的object-positon属性规定了可替换元素的内容，在其内容框中的位置

先来看一下兼容性吧

当没有给定object-fix时给定不同值时具体的表现形式如下

由上图可以看出当给定10px 20px 时分别距离左边10px、具体顶部20px

当给定object-fix: none;时

因图片本身为710*710大小，设置img大小为300px时，此时如果没有给定object-positon属性，则如上图中的第二张小图片所展示，展示的是图片中间的一部分，当给定一定的位置时，则会如图一展示

由上图可以看出，当给定的大小超过图片本身的大小时，如果设置object-position: 50% 50%;时，图片会居中展示

是时候了解一下object-fix这个属性了

object-fit属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框

mdn地址：

img的object-fit属性

object-position