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. Java 读取Excel2007 jar包冲突的问题（org.apache.poi.POIXMLException: java.lang.reflect.InvocationTargetException）

    1.jar包冲突报错问题 2.使用的jar包,以及重复jar包 3.删除重复jar包

  2. （一）Quartz2.2.1 简单例子

    转载至http://blog.csdn.net/a4307515/article/details/46985533 1.关键接口 Scheduler,任务调度的API:它可以用来启动或者终止任务等. ...

  3. BZOJ4998 星球联盟（LCT+双连通分量+并查集）

    即要求动态维护边双.出现环时将路径上的点合并即可.LCT维护.具体地,加边成环时makeroot+access+splay一套把这段路径提出来,暴力dfs修改并查集祖先,并将这部分与根断开,视为删除这 ...

  4. QT创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束的简单示例

    QT创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束的简单示例 部分代码: // 创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束 QMenu *pDialog = mBar->ad ...

  5. Codeforces711

    A ZS the Coder and Chris the Baboon are travelling to Udayland! To get there, they have to get on th ...

  6. 【BZOJ1068】压缩（动态规划）

    [BZOJ1068]压缩(动态规划) 题面 BZOJ 洛谷 题解 比较简单的\(dp\) 设\(f[i][j]\)表示当前已经匹配到了原串的第\(i\)个位置,上一个\(M\)在第\(j\)个字符之后 ...

  7. NOIP2017 列队 题解报告【56行线段树】

    题目描述 Sylvia 是一个热爱学习的女♂孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia 所在的方阵中有n \times mn×m名学生,方阵的行数 ...

  8. oracle的sign()函数

    sign函数 比较大小函数 sign 函数语法:sign(n) 函数说明:取数字n的符号,大于0返回1, 小于0返回-1, 等于0返回0 示例1: ),),) from dual; ) ) ) ——— ...

  9. 《剑指offer》— JavaScript（5）用两个栈实现队列

    用两个栈实现队列 题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 实现代码 function Stack(){ var item = []; this. ...

  10. 使用gulp进行css、js压缩

    var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); var concatCss = require('gulp- ...