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. 【明哥报错簿】之【解决eclipse项目小红叉】

    解决方案: 0.如果是jdk版本不一致,直接右击项目名称,选择maven里面的update project.原因一般是maven的pom.xml里面设置的编译插件org.apache.maven.pl ...

  2. Day 2 笔记 数据结构

    Day 2 笔记 数据结构 1.栈.队列.链表等数据结构都是线性数据结构 2.树状数据结构:二叉堆,线段树,树状数组,并查集,st表... 优先队列其实与二叉堆的存储方式并不相同. 一.二叉堆 1.二 ...

  3. 分布式文件系统服务器FastDFS

    1. 什么是FastDFS FastDFS 是用 c 语言编写的一款开源的分布式文件系统.FastDFS 为互联网量身定制, 充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标, ...

  4. TCP/IP四层协议模型与ISO七层模型

    TCP/IP四层协议模型与ISO七层模型 在世界上各地,各种各样的电脑运行着各自不同的操作系统为大家服务,这些电脑在表达同一种信息的时候所使用的方法是千差万别.就好像圣经中上帝打乱了各地人的口音,让他 ...

  5. 转：评估指标MAP

    转:http://www.zhenv5.com/?p=1079 MAP可以由它的三个部分来理解:P,AP,MAP 先说P(Precision)精度,正确率.在信息检索领域用的比较多,和正确率一块出现的 ...

  6. 【Luogu3676】小清新数据结构题（动态点分治）

    [Luogu3676]小清新数据结构题(动态点分治) 题面 洛谷 题解 先扯远点,这题我第一次看的时候觉得是一个树链剖分+线段树维护. 做法大概是这样: 我们先以任意一个点为根,把当前点看成是一棵有根 ...

  7. UTF-8和GBK编码之间的区别(页面编码、数据库编码区别)以及在实际项目中的应用

    第一节:UTF-8和GBK编码概述 UTF-8 (8-bit Unicode Transformation Format) 是一种针对Unicode的可变长度字符编码,又称万国码,它包含全世界所有国家 ...

  8. iOS之富文本(一)

    NSAttributedString叫做富文本,是一种带有属性的字符串,通过它可以轻松的在一个字符串中表现出多种字体.字号.字体大小等各不相同的风格,还可以对段落进行格式化. 通过以下代码即可实现上面 ...

  9. ACE服务端编程5：ACE日志输出和跟踪

    服务器程序经常需要在命令行中显示错误消息.状态或者用来跟踪程序的执行路径,最简单的方法是使用printf. ACE提供了更强大日志设施: 1.可以在编译时启用或禁用宏: 2.可以动态的启用或禁用宏: ...

  10. Bootstrapping算法

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...