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. python 代码中的类和对象

  2. N!分解素因子及若干问题【转载】

    这里写的非常好http://www.cnblogs.com/openorz/archive/2011/11/14/2248992.html,感谢博主,我这里就直接用了. 将N!表示成 N! = p1^ ...

  3. MySQL命令行分号无法结束问题解决

    背景:输入一串查询语句,以分号结束,发现没有结束,再打回车,分号,还是不完.什么exit,quit,bye,都不顶用如果要ctrl+C吧,又得退出mysql,一切重来,很麻烦.后来终于发现,引起这种现 ...

  4. JQ取消hover事件

    $('a').unbind('mouseenter').unbind('mouseleave');

  5. 大侦探福老师——幽灵Crash谜踪案

    闲鱼Flutter技术的基础设施已基本趋于稳定,就在我们准备松口气的时候,一个Crash却异军突起冲击着我们的稳定性防线!闲鱼技术火速成立侦探小组执行嫌犯侦查行动,经理重重磨难终于在一个隐蔽的角落将其 ...

  6. @codeforces - 1214G@ Feeling Good

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 n*m 的 01 矩阵 A,一开始所有格子都为 0. ...

  7. HZOJ Weed

    作者的题解: 如果一段操作被执行,会对整个栈有什么影响呢? 把栈弹出若干个数后再插入若干个数. 线段树: 每个点纪录三个值:执行完这段操作后会删多少个,再插多少个,插的和一共是多少. 合并值时再用一个 ...

  8. BT17破解软件

             大家好我QQ是1617089375 有非常多网友非常好奇新版BT17无线网破解软件究竟怎么样.无图无真相,所以我上传给大家看看,眼下视频正在录制.稍后也会把相应的视频公布到网上.因为 ...

  9. oracle函数 COALESCE(c1, c2, ...,cn)

    [功能]返回列表中第一个非空的表达式,如果所有表达式都为空值则返回1个空值 [参数]c1, c2, ...,cn,字符型/数值型/日期型,必须类型相同或null [返回]同参数类型 [说明]从Orac ...

  10. 1x1卷积

    你可能会想为什么有人会用1x1卷积,因为它关注的不是一块像素,而是一个像素,图1 图1 我们看看传统的卷积,它基本上是运行在一个小块图像上的小分类器,但仅仅是个线性分类器.图2 图2 如果你在中间加一 ...