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. 【windows系统下的navicat与ubuntu中的mysql的连接方法】

    ##红色代码直接复制到终端 1.首先,终端上mysql -u root -p,进入你的mysql数据库,操作数据库use mysql.2.切换root权限:sudo -i3.对root授权,输入:gr ...

  2. selenium实现网页截全屏

    from selenium import webdriver options = webdriver.ChromeOptions() options.add_argument('--headless' ...

  3. python3中的zip函数

    zip函数的作用: zip函数接受任意多个可迭代对象作为参数,将对象中对应的元素打包成一个tuple,然后返回一个可迭代的zip对象. 这个可迭代对象可以使用循环的方式列出其元素 若多个可迭代对象的长 ...

  4. Win10家庭版如何启用本地组策略

    组策略对于优化和维护Windows系统来说十分重要.众所周知,Windows 10家庭版中并不包含组策略,对于使用家庭版Windows的朋友来说,十分不方便.小编将以Windows10家庭版为例,带大 ...

  5. python 处理图像出现The lower bounary is neither an array of the same size and same type as src, nor a scalar in function inRange

    在用python处理图像过程中出现如下错误 导致这个错误的原因是im是二维,而lower_green和upper_green是三维,所以无法用inRange处理. 由上图可以看出image本来是具有高 ...

  6. 即插即用，基于阿里云Ganos快速构建云上开源GIS方案

    对于轻量级GIS应用,选择具备时空能力的云上数据库再搭配开源GIS软件,能够快速构建稳定.廉价.实用的GIS解决方案.Ganos是阿里云自研时空基础设施(PaaS层)的核心引擎,该引擎整合了云上异构计 ...

  7. RequestMapping中produces属性作用

    注解RequestMapping中produces属性可以设置返回数据的类型以及编码,可以是json或者xml: @RequestMapping(value="/xxx",prod ...

  8. LRJ-Example-06-04-Uva11988

    单向链表的元素存放在数组s[]中,next指针存放在数组next[]中. 链表初始为空,next[0] == 0 代表链表结尾,类似NULL指针,在最后打印链表的时候作为for循环结束的条件. 依次插 ...

  9. 关于XIFF开发IM的一些想法

    因为发现网上XIFF的资料真的不多,何况现在gg又被和谐,查询资料很是不便.我写这篇文章的目的除了跟大家分享一些开发心得,也希望有类似经验的朋友看到文章后有机会多多交流. 之前我没有怎么接触过flas ...

  10. meta标签、常用的文字类标签及其区别

    常用的文字类基本标签 段落:p标题文字 :h1~h6超链接:a,必须属性href,后跟跳转地址图片:img,必须属性src,后跟图片地址字体斜体:em.i 文字加粗:b.strong文字下划线:u文字 ...