object-fit⽤法
概要
该 object-fit CSS 属性指定替换元素的内容应该如何适应到其使⽤的⾼度和宽度确定的框。
初始值 fill
适⽤于 替换元素
小学英语网遗传 是
媒体 视觉
计算值 按规定
动画类型 离散的
为了规范 通过正规的语法定义的唯⼀⽆歧义的秩序
/* 关键属性 */
object-fit: fill;
object-fit: contain;
object-fit: cover;
chock是什么意思object-fit: none;
object-fit: scale-down;
/* 全局属性 */
object-fit: inherit;
object-fit: initial;
object-fit: unt;
初始值 fill
适⽤元素 replaced elements
是否是继承属性 否
适⽤媒体 visual
计算值 as specified
Animation type discrete
正规顺序 the unique non-ambiguous order defined by the formal grammar
句法
object-fit属性由下列的值中选择⼀个关键字来指定。
值
五年级上册英语人教版跟读软件fill
被替换的内容的⼤⼩，以填补该元素的内容框：对象的具体对象的⼤⼩是元素的使⽤宽度和⾼度。
contain
郑博闻
被替换的内容的⼤⼩，为⾃⾝宽⾼⽐不变，适应该元素的内容框的⼤⼩：它的具体对象的⼤⼩被解析为对元素的使⽤宽度和⾼度的含有约束。
cover
被替换的内容的尺⼨却使元件的整个内容框，以保持其长宽⽐其具体的对象的⼤⼩被解析为针对元素的使⽤的宽度和⾼度的盖约束。none
雪利被替换的内容的尺⼨却使元件的整个内容框，以保持其长宽⽐其具体的对象的⼤⼩被解析为针对元素的使⽤的宽度和⾼度的盖约束。scale-down
内容的尺⼨仿佛none或contain指定了，取将导致更⼩的具体对象的⼤⼩。
形式语法
填写|包含|封⾯|没有|⽐例缩⼩
例
HTML 内容
<h2>object-fit: fill</h2>
<img src="/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
<img src="/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
<h2>object-fit: contain</h2>
<img src="/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
<img src="/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
<h2>object-fit: cover</h2>
<img src="/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
<img src="/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
<h2>object-fit: none</h2>
<img src="/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
<img src="/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
<h2>object-fit: scale-down</h2>攘臂
<img src="/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
<img src="/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/> </div>
CSS 内容
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
height: 940px;
drudge浙江传媒学院怎么样}
img {
搭档的英语width: 150px;
height: 100px;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
margin-top: 10px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.
scale-down {
affsobject-fit: scale-down;
}
效果
(未展⽰)
规范
规范 状态 定论
CSS图像值和替换内容模块4级
在该规范’对象配合“的定义。 ⼯作草案 在from-image和flip关键字已被添加。CSS图像值和替换内容模块级3
在该规范’对象配合“的定义。 候选推荐 初始定义
浏览器兼容性
Desktop
特征 ⾕歌 ⽕狐(Gecko) IE 欧朋 Safari(苹果浏览器)
基本⽀持 31.0 36 不⽀持 11.60- 19.0 是
Mobile
特征 Android ⽕狐移动(Gecko) IE移动 欧朋移动 Safari移动
基本⽀持 4.4.4 36 不⽀持 11.5-24 是
其他
其他图像相关的CSS属性: object-position，image-orientation，image-rendering，image-resolution.
