zoukankan      html  css  js  c++  java
  • CSS object-fit 对图片的处理

    object-fit:

    指定可替换元素的内容应如何适应到需使用的高度和宽度确定的框

    平时写代码经常会在代码中插入图片,你是否会多少感觉插入的图片被拉伸或是被缩放,在这里我们就探讨object-fit对图片处理的应用

    语法及作用

    fill (充满)

    整个对象将完全填充内容框。当对象的宽高与内容框不匹配,该对象将被拉伸以适应内容框

    示例:

    object-fit:fill;  
    

    contain (包含)

    内容将被缩放,以保持填充元素的宽高比。该对象在填充的时保持长宽比,因为宽高比可能不匹配,则会被添加元素外的“黑边”

    示例:

     object-fit:contain;  
    

    cover (封面)

    内容将保持宽高比,同时填充整个内容框。若该对象的宽高比与盒子高度不匹配,该对象将被裁剪以适应

    示例:

     object-fit:cover;  
    

    none (没有)

    没有被替换内容,尺寸不会发生改变

    示例:

     object-fit:none;  
    

    scale-down (缩小比例)

    内容的尺寸取none和contain中尺寸更小的那一个

    示例:

    boject-fit:scale-down

    这里取得是object-fit:contain的效果

    效果对比:

    豌豆资源搜索网站https://55wd.com 广州vi设计公司http://www.maiqicn.com

    小结:

    可以根据object-fit:语法来调节图片,使其达到想要的效果

  • 相关阅读:
    access denied for user 'root'@'localhost'(using password:YES) FOR WINDOWS
    PKU 1001解题代码
    PKU 1002解题总结
    为什么vue组件data必须是函数
    call 和 apply 区别
    CSS|Stacking context 堆叠上下文
    Vue3.0 tsx 函数组件
    js中的变量提升
    JavaEE|架构
    MVC,MVP 和 MVVM
  • 原文地址:https://www.cnblogs.com/qianxiaox/p/13735327.html
Copyright © 2011-2022 走看看