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. 洛谷P2740 [USACO4.2]草地排水Drainage Ditches

    题目背景 在农夫约翰的农场上,每逢下雨,贝茜最喜欢的三叶草地就积聚了一潭水.这意味着草地被水淹没了,并且小草要继续生长还要花相当长一段时间.因此,农夫约翰修建了一套排水系统来使贝茜的草地免除被大水淹没 ...

  2. Codeforces 748D Santa Claus and a Palindrome

    雅礼集训期间我好像考完试就开始划水了啊 给出k个长度相同的字符串,每个串有一个权值,选出一些串连成一个回文串.使得选中的串的总权值最大. 如果选一个串,必须同时选一个对称的串.还有一个特殊情况是可以在 ...

  3. 【bzoj3203】[Sdoi2013]保护出题人 凸包+二分

    题目描述 输入 第一行两个空格隔开的正整数n和d,分别表示关数和相邻僵尸间的距离.接下来n行每行两个空格隔开的正整数,第i + 1行为Ai和 Xi,分别表示相比上一关在僵尸队列排头增加血量为Ai 点的 ...

  4. 【刷题】BZOJ 3365 [Usaco2004 Feb]Distance Statistics 路程统计

    Description 在得知了自己农场的完整地图后(地图形式如前三题所述),约翰又有了新的问题．他提供 一个整数K(1≤K≤109),希望你输出有多少对农场之间的距离是不超过K的． Input 第1 ...

  5. jsonP 后台写法 及 层级树型数据递归查询

    Controller层: package com.taotao.rest.controller; import org.springframework.beans.factory.annotation ...

  6. ios错误码:NSError对象.code

    1. URL Loading System Error Codes These values are returned as the error code property of an NSError ...

  7. 7.Configurator API 详细介绍

    一.Configurator类介绍与API解释 1.Configurator类介绍 1)用于设置脚本动过的默认延时 2)功能 a.可调节两个模拟动作间的默认时间间隔 b.可调节输入文本的输入时间间隔 ...

  8. 「Linux」VMware安装centos7(二)

    一.检查是否联网 命令:ping www.baidu.com 二.查询系统中的地址信息 命令:ip addr 三.查看当前网络连接 命令:nmcli connection show 四.设置网络连接 ...

  9. jquery validate submitHandler 提交导致死循环

    dom对像的提交form.submit();和jquery对像的提交$('').submit();功能上是没有什么区别的.但是如果用了jquery validate插件,提交时这二个就区别大了.$(' ...

  10. Vue DatePicker和不可用

    input控件可以直接设置disabled为不可用状态: DatePicker要想不可编辑,设置readonly属性即可 <DatePicker type="date" v- ...