• 关于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,然后选择其中尺寸最小的那个呈现了
          
      • 图片展示:
        按照上面的代码依次展示

      • 使用范围:头像等,后台传过来的数据不一致的时候;

  • 相关阅读:
    Ubuntu 12.04 gedit编辑器 中文乱码
    ubuntu设置vim语法高亮显示和自动缩进
    Linux学习小结(转)
    指向常量的指针和常量指针
    Android之EditText
    android之TextView
    Android存储机制之Preference
    android实现可拖动按钮
    用turtle画图
    torchvision里densenet代码分析
  • 原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/12512464.html
Copyright © 2020-2023  润新知