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. 【风马一族_软件】微软卸载工具_msicuu2.exe

    msicuu2.exe是微软的Windows Installer清理工具,可以用来清理微软安装包软件产生的垃圾,当然也可以拿来作为修复相关软件的卸载准备使用 下载链接:http://files.cnb ...

  2. Python sorted

    sorted函数: iterable:是可迭代类型;cmp:用于比较的函数,比较什么由key决定,有默认值,迭代集合中的一项;key:用列表元素的某个属性和函数进行作为关键字,有默认值,迭代集合中的一 ...

  3. Web富媒体应用

    曾几何时,大家都在以flash开发的富媒体交互应用而感叹,一是叹它的丰富多彩的效果,一是叹它的局限.性能以及加载时长等问题. 如今,市场以及基本上没有flash什么事情了,而是H5的天下,可惜,移动应 ...

  4. homestead 重复出错

    vboxmanage list vms "homestead-7" {2c8b0ea2-d862-4f4e-bcb2-2d7db848686f} vboxmanage unregi ...

  5. Python学习之路1☞简介及入门代码

    在学习之前,首先了解一下python的前世今生 一.python简介与发展: python 是一种面向对象的解释性计算机程序设计语言. python由荷兰人Guido van Rossum 于1989 ...

  6. el-dialog 一些问题 局中滚动

    .el-dialog { position: absolute; top: 50%; left: 50%; margin: 0 !important; transform: translate(-50 ...

  7. Python操作pymysql写入数据库时的错误

    错误一 InternalError: (pymysql.err.InternalError) (1366, "Incorrect string value: '\\xE6\\xAD\\xA3 ...

  8. poj 1845 【数论:逆元,二分(乘法),拓展欧几里得,费马小定理】

    POJ 1845 题意不说了,网上一大堆.此题做了一天,必须要整理一下了. 刚开始用费马小定理做,WA.(poj敢说我代码WA???)(以下代码其实都不严谨,按照数据要求A是可以等于0的,那么结果自然 ...

  9. JPA中id前面有空格导致的"Column 'id' not found"问题

    问题背景 昨晚有个同事发生了一个神奇的问题,一如既往的问题,一如既然的用我写的BEJSON-JAVA代码生成器生成,却发现一直提示Column 'id' not found.这就很TM神奇了 2018 ...

  10. SDUT-1479_数据结构实验之栈与队列九:行编辑器

    数据结构实验之栈与队列九:行编辑器 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 一个简单的行编辑程序的功能是:接受用 ...