MDN定义

https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

该 object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。简单的说是处理替换元素（replaced elements） 的自适应问题，简单的说就是处理替换元素的变形（这里指长宽比例变形）；

可替换元素

http://openwares.net/internet/css_replaced_element.html

其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比如,img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。

CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

object-fit 语法

  • fill：默认值。填充，可替换元素填满整个内容区域，可能会改变长宽比，导致拉伸。
  • contain：包含，保持原始的尺寸比例，保证可替换元素完整显示，宽度或高度至少有一个和内容区域的宽度或高度一致，部分内容会空白。
  • cover：覆盖，保持原始的尺寸比例，保证内容区域被填满。因此，可替换元素可能会被切掉一部分，从而不能完整展示。
  • none：保持可替换元素原尺寸和比例。
  • scale-down：等比缩小。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         .box{

             position:relative;

             float:left;

             margin:0 10px 40px 10px;

             width:150px;

             height:150px;

         }

         .box>img{

             width:100%;

             height:100%;

             background-color:#000;

         }

         .fill{

             object-fit:fill;

         }

         .contain{

             object-fit:contain;

         }

         .cover{

             object-fit:cover;

         }

         .none{

             object-fit:none;

         }

         .scale{

             object-fit:scale-down;

         }

         p{

             text-align: center;

         }

     </style>

 </head>

 <body>

 <div class="box">

     <img src="img/21.jpg" class="fill" alt="替换内容拉伸填满整个content box, 不保证保持原有的比例。">

    <p>拉伸</p>

 </div>

 <div class="box">

     <img src="img/21.jpg" class="contain" alt="保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下,会留白">

     <p>保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下,会留白</p>

 </div>

 <div class="box">

     <img src="img/21.jpg" class="cover" alt="保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，会裁剪，默认显示居中">

     <p>保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，会裁剪，默认显示居中</p>

 </div>

 <div class="box">

     <img src="img/21.jpg" class="none" alt="保持原有尺寸比例。同时保持替换内容原始尺寸大小">

     <p>保持原有尺寸比例。同时保持替换内容原始尺寸大小</p>

 </div>

 <div class="box">

     <img src="img/21.jpg" class="scale" alt="依次设置了none或contain, 最终呈现的是尺寸比较小的那个">

     <p>依次设置了none或contain, 最终呈现的是尺寸比较小的那个</p>

 </div>

 </body>

 </html>

object-fit和object-position之间的关系有点类似于background-size和background-position，无论是，关系还是属性值，都有相似之处，因此，我们在理解object-fit和object-position的时候，可以或多或少映射background-size和background-position；

场景

类似与微信个人相册

现代web显示环境万变，响应式布局(适配移动端)、半响应布局(宽窄屏适配)以及传统流体布局（任意宽度水平自适应）都比较常见，结果，在处理这些有着固定尺寸的元素的时候，就会遇到障碍，这个Object-fit 天生外挂剪裁功能，比之前的

1. 外部尺寸容器overflow:hidden限制，里面<img>或position或margin定位,但这种方法需要2层标签，麻烦。
2. clip实现img sprites效果，但是<img>元素必须position:absolute， 麻烦。

代码简节很多，而且兼容性好（IE 不兼容）

CSS3 object-fit 图像裁剪的更多相关文章

  1. PHP图像裁剪为任意大小的图像，图像不变形，不留下空白

    <?php /** * 说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ fu ...

  2. HTML canvas图像裁剪

    canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅! context.drawImage(img,sx,sy,swidth,sheight,x,y,width,h ...

  3. 【开源】canvas图像裁剪、压缩、旋转

    前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求. 考虑到已有各轮子的契合度都不高,于是自己重新造了一个轮子. 关于图像裁剪.压缩 在HTML5时代,canvas的功能已经非常强大了,可 ...

  4. php 图像裁剪(自定义裁剪图片大小)

    <?php /** * 图像裁剪 * @param $title string 原图路径 * @param $content string 需要裁剪的宽 * @param $encode str ...

  5. canvas图像裁剪、压缩、旋转

    转载于:http://www.cnblogs.com/dailc/p/7843204.html 前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求.考虑到已有各轮子的契合度都不高,于是自己 ...

  6. jQuery Jcrop 图像裁剪

    jQuery Jcrop 图像裁剪 http://code.ciaoca.com/jquery/jcrop/ cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) https://b ...

  7. mui---调用图像裁剪android

    mui调用图像裁剪android: var IMAGE_UNSPECIFIED = "image/*"; //相册显示的文件类型 var PHOTOZOOM = 2; // 获取完 ...

  8. PIE SDK图像裁剪

    1.算法功能简介 图像裁剪的目的是获取选定的影像范围区域.图像裁切工具提供像素范围裁切.矢量裁切.栅格图像裁切和几何图元裁切四种方式. 像素范围裁切是基于像素坐标获取矩形裁切区域的裁切方式:矢量裁切是 ...

  9. STM32内存受限情况下摄像头驱动方式与图像裁剪的选择

    1.STM32图像接收接口 使用stm32芯片,128kB RAM,512kB Rom,资源有限,接摄像头采集图像,这种情况下,内存利用制约程序设计. STM32使用DCMI接口读取摄像头,协议如下. ...

随机推荐

  1. BZOJ 1177 Oil(特技枚举)

    对于三个正方形的位置一共有六种情况. 预处理出(i,j)左上角,左下角,右上角,右下角区域内最大权值的正方形. 枚举分界线更新答案. 刚开始想了一个错误的DP也是蠢啊. #include<set ...

  2. 【bzoj4006】[JLOI2015]管道连接 斯坦纳树+状压dp

    题目描述 给出一张 $n$ 个点 $m$ 条边的无向图和 $p$ 个特殊点,每个特殊点有一个颜色.要求选出若干条边,使得颜色相同的特殊点在同一个连通块内.输出最小边权和. 输入 第一行包含三个整数 n ...

  3. 转：机器学习 规则化和模型选择（Regularization and model selection）

    规则化和模型选择(Regularization and model selection) 转:http://www.cnblogs.com/jerrylead/archive/2011/03/27/1 ...

  4. C++11线程使用总结

    std::thread 在 <thread> 头文件中声明,因此使用 std::thread 需包含 <thread> 头文件. <thread> 头文件摘要 &l ...

  5. 史上最全面，清晰的SharedPreferences解析

    基础用法获取Sp:getput监听器原理分析获取SharedPreferences构造SharedPreferencesgetX原理分析putX原理分析创建editorputStringapplyap ...

  6. Hbase(三) hbase协处理器与二级索引

    一.协处理器—Coprocessor 1. 起源Hbase 作为列族数据库最经常被人诟病的特性包括:无法轻易建立“二级索引”,难以执 行求和.计数.排序等操作.比如,在旧版本的(<0.92)Hb ...

  7. Virtual Box虚拟机下CentOS网络设置

    VirtualBox中有4中网络连接方式: a. NAT                          网络地址转换模式(Network Address Translation)b. Bridge ...

  8. sloop公共函数之添加信号，定时器及socket

    1:添加信号 1.1 原型:sloop_handle sloop_register_signal(int sig, sloop_signal_handler handler, void * param ...

  9. 手动搭建高可用的kubernetes 集群

    之前按照和我一步步部署 kubernetes 集群的步骤一步一步的成功的使用二进制的方式安装了kubernetes集群,在该文档的基础上重新部署了最新的v1.8.2版本,实现了kube-apiserv ...

  10. linux命令df中df -h和df -i的区别

    df 命令: linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 1．命令格式: df [选项] [ ...