• CSS object-fit 属性


    对图片进行剪切,保留原始比例:

    img.a {
       200px;
      height: 400px;
      object-fit: cover;
    }

    object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

    object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

    您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。

    fill 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。  
    contain 保持原有尺寸比例。内容被缩放。  
    cover 保持原有尺寸比例。但部分内容可能被剪切。  
    none 保留原有元素内容的长度和宽度,也就是说内容不会被重置。  
    scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。  
    initial 设置为默认值,关于 initial  
    inherit 从该元素的父元素继承属性。 关于 inherit
    图片预览器
    引入方式:
    <link rel="stylesheet" href="/css/viewer.min.css">
    <script src="/js/viewer.min.js"></script>
    <script src="/js/custom-viewer.js"></script>
    使用方式:
    在需要的img标签上添加 'view-image' 类
    <img class="view-image" src="/images/pages/design-concept/mock/zt-mock-works-auth-logo@2x.png" alt="icon-logo">

    如果是多图:
    <ul class="view-image">
      <li><img/></li>
      <li><img/></li>
      ...
    </ul>
  • 相关阅读:
    docker 部署 禅道系统
    docker 部署 jenkins
    运筹方法
    软件工程基础知识
    操作系统知识
    程序设计语言基础知识
    计算机组成与配置
    oracle触发器
    性能测试监控工具的使用
    数据库设计范式
  • 原文地址:https://www.cnblogs.com/fgwh-y/p/13820297.html
Copyright © 2020-2023  润新知