object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

属性值

contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

cover：被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。

fill：被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

none：被替换的内容将保持其原有的尺寸。

scale-down：内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

下面是对一张正常图片设置object-fit为不同值的效果

正常一张图片

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

css属性object-fit的更多相关文章

  1. css属性编写顺序+mysql基本操作+html细节（个人笔记）

    css属性编写顺序: 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 自身盒模型的属性(比如:width ...

  2. CSS属性一览

    CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...

  3. Web 前端开发者必知CSS 属性

    1.  圆角效果 如今的Web设计在不断跟进最新的开发技术,纷纷采用HTML5来开发多样性的Web应用.HTML5的优势之一,就是之前必须用图片实现的元素,现在可以用代码来实现. “border-ra ...

  4. HTML标签CSS属性默认值汇总

    HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...

  5. js原生获取元素的css属性

    习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...

  6. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  7. 换行的css属性

    //正常换行  word-break:keep-all;word-wrap:normal; //下面这行是自动换行  word-break:break-all;word-wrap:break-word ...

  8. jquery css属性练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. animate支持的css属性

    支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...

  10. css属性的选择对动画性能的影响

    现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...

随机推荐

  1. bzoj1060 时态同步

    Description 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路板 ...

  2. python之浮点型类型

    浮点型:float 如3.14,2.88 class float(object): """ float(x) -> floating point number Co ...

  3. 安装软件时候出现"无效驱动器D"

    安装软件的时候,出现以下问题. 如图:  无效驱动器 原因是因为之前安装过这样的软件在H盘,后期更改没了H,所以出现了错误. 解决方案: 打开注册表,搜索软件的关键字如  vmware 删除错误路径即 ...

  4. Mysql数据库日志类型查询与配置详解

    在mysql中日志分为很多种,下面小编来给大家介绍Mysql数据库日志类型查询与使用,希望对各位同学会有所帮助 mysql常见的日志类型有五种:错误日志.二进制日志.查询日志.慢查日志和中继日志. 一 ...

  5. [React Native]升级React Native版本

    React Native正式版本还没发布,但是小版本基本上每个月都更新1-2次.9月11号又更新了0.33版本,其中有两个增强功能正好是项目中用到的. 添加Android6.0权限验证API Add ...

  6. win7 64位下如何安装配置mysql-5.7.4-m14-winx64（安装记录）

    1.   mysql-5.7.4-m14-winx64.zip下载 官方网站下载地址:http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.17 ...

  7. Validation异常：No validator could be found for constraint '.....' validating type 'java.lang.Integer'.

    javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint 'java ...

  8. 【转载】使用 gnuplot 在网页中显示数据

    来源:http://www.ibm.com/developerworks/cn/aix/library/au-gnuplot/ 简介 gnuplot 是一个用于生成趋势图和其他图形的工具.它通常用于收 ...

  9. hdu 1054 【树形dp】

    http://acm.hdu.edu.cn/showproblem.php?pid=1054 给定一棵树,点能看住与其相连的边,问最少需要选定多少个点看住所有的边. 定义dp[maxn][2],dp[ ...

  10. java基础部分的一些有意思的东西。

    ${li.key!=''&&li.key!= null}可以直接判断不为空 ${empty li.value}也是不为空. 最近好烦迭代map里的map或者map里的list 后来发现 ...