详解CSS中的 object-fit 与 object-position

问题：
一个div宽度不固定，高度固定，采用Flex布局，它里面有两个元素一个img宽度占40%，高度占100%，一个p元素，宽度占60%，高度占100%，调整浏览器窗口大小，要保证，img元素不变形，宽高比不变，怎么办！

从图中可以看出，随着调整浏览器窗口，图片的宽高比也被破坏了，我们该怎么办呢？我想大家应该会想到用 background，用一个div的background来替代img元素，这样就可以调整它的background-size 和 background-position，就能保证图片不变形，宽高比不变了，但是其实不用这么麻烦，我们直接用 object-fit 与 object-position 就可以了。
效果图：

上面是object-fit取值为 none 的情况，我们看看object-fit取值为 contain 的情况。

好的，问题解决了，我们来具体看看 object-fit 与 object-posit