实用CSS属性——object-fit

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

object-fit介绍

我们常常将图片或者视频放在一个盒子内，那么就经常在业务上考虑适配的问题，而object-fit能帮助我们设定图片在盒子中的显示方法

object-fit的值

首先我们先将父盒子设定上宽度和高度

.box{
    witdh:100px;
    height:200px;
}

然后为四个同样盒子内的图片设置object-fitsi

• comtain

.box_1{
    object-fit:contain;
}

contain不变形，保持图片的原始比例限制在div内，最大程度地展示出来

• cover

.box_2{
    object-fit:cover;
}

cover不变形，保持图片的原始比例，图片完全覆盖div且溢出去的方向被剪切

• fill(默认)

.box_3{
    object-fit:fill;
}

fill是默认值，无论图片的原始尺寸是什么样的都会填满div

• none

.box_4{
    object-fit:none;
}

none会保持图片的原始属性，但是如果父盒子的设定小于图片的大小，图片将会被裁剪

扩展适配

既然这里提到了图片和视频的适配问题，那么我就提及一下背景图片的适配问题 通常我们使用background-img时会出现很多问题，比如图片重复，图片不平铺，等等问题。 那么我们就可以利用background的几种值来解决这个问题。

• background-color: 指定填充背景的颜色。

• background-image: 引用图片作为背景。

• background-position: 指定元素背景图片的位置。

• background-repeat: 决定是否重复背景图片。

• background-attachment: 决定背景图是否随页面滚动。