版权声明： https://blog.csdn.net/caoyan0829/article/details/81976108
我遇到的问题是这样的：
list要有图片，但是有的图片太长或者太宽，就需要固定长和宽，开始我是用下面的方法的。使用background-size: cover这个属性。但是如果 图片url存在并且错误的时候，代码会执行第一段。那么久出现一个问题就是背景图片解析不出来，显示空白框。
解决方法：
使用img标签，有人会说img没法做到background-size: cover这种效果。
使用下图的object-fit:cover就会与background-size: cover的效果一致了
object-fit:fill
被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。
object-fit:contain
被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
object-fit:cover
被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。
object-fit:none
被替换的内容尺寸不会被改变。
object-fit:scale-down
内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。
有兴趣的可以去看看效果,查看属性效果的地址。
最后分享一个公众号二维码，写一些散文和影评等，欢迎关注。
