关于CSS3的object-fit属性的详细理解：

关于CSS3的object-fit属性的详细理解：

• 对object-fit属性的理解：

  • 属性值：

    • fill :

      .test_img{
      	200px;
      	hight:200px;
      	object-fit : fill;
      }
      //表示：填充，是默认值。图片将填满整个200px区域，不保证原有的比例
      

    • contain:

      .test_img{
      	200px;
      	hight:200px;
      	object-fit : contain;
      }
      //表示：包含。保持图片的原有尺寸比例。保证图片一定可以在200px的容器区域放下。因此可能会在容器的内部留白
      

    • cover:

      .test_img{
      	200px;
      	hight:200px;
      	object-fit : cover;
      }
      //表示：覆盖，保持图片原有的尺寸比例。保证图片的尺寸一定大于200px容器区域，宽度高度至少有一个和容器一致。因此，可能会让图片的部分区域不可见
      

    • none:

      .test_img{
      	200px;
      	hight:200px;
      	object-fit : none;
      }
      //表示：无，保持图片原有的尺寸比例
      

    • scale-down:

      .test_img{
      	200px;
      	hight:200px;
      	object-fit : scale-down;
      }
      //表示：降低，就是依次设置了none,contain,然后选择其中尺寸最小的那个呈现了
      

  • 图片展示：
    按照上面的代码依次展示
    

  • 使用范围：头像等，后台传过来的数据不一致的时候；