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. 实现对一个8bit数据的指定位的置0或者置1操作，并保持其他位不变。

    给定函数原型:void bit_set(unsigned char *p_data,unsigned char positin,int flag) 参数说明:p_data是指定的源数据:positio ...

  2. 【比赛】HNOI2018 毒瘤

    虚树+dp 直接看zlttttt的强大题解 zlttttt的题解看这里 #include<bits/stdc++.h> #define ui unsigned int #define ll ...

  3. Active Directory中获取域管理员权限的攻击方法

    Active Directory中获取域管理员权限的攻击方法         译:by  backlion 0x00 前言 攻击者可以通过多种方式在Active Directory中获得域管理员权限, ...

  4. Chiaki Sequence Revisited HDU - 6304 lowbit找规律法

    Problem Description Chiaki is interested in an infinite sequence a1,a2,a3,..., which is defined as f ...

  5. C++ ------ 虚函数覆盖、重载

    在C++语言中,虚函数是非常重要的概念,虚函数是实现C++面向对象中多态性和继承性的基石.而多态性和继承性则是面向对象语言的精髓.掌握虚函数才算是真正掌握C++语言,而C++语言中虚函数的继承覆盖与函 ...

  6. mysql5.7 安装常见问题

    mysql 5.7安装要执行以下三个命令: 1.mysql install2.mysqld --initialize3.net start mysql 第一个命令可能会出现Install/Remove ...

  7. [DeeplearningAI笔记]序列模型2.9情感分类

    5.2自然语言处理 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2.9 Sentiment classification 情感分类 情感分类任务简单来说是看一段文本,然后分辨这个人是否喜欢 ...

  8. 海思HI35XX之----视频处理单元各通道间的关系

    最近在折腾HI3518C的芯片,应用到IPCamera上,最终获取多路不同分辨率的视频流供不同需求的预览切换.此处简单记录一下视频前处理元VPSS(Video Process Sub-System)的 ...

  9. CentOS7，安装Tomcat8.5、JDK1.8，并设置开机启动（Linux CentOS Tomcat、JDK+Tomcat、Tomcat开机自启动）

    1.下载JDK1.8.Tomcat8 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.ht ...

  10. 洛谷 2186 小Z的栈函数

    https://www.luogu.org/problem/show?pid=2186 题目描述 小Z最近发现了一个神奇的机器,这个机器的所有操作都是通过维护一个栈来完成的,它支持如下11个操作: N ...