本文介绍了CSS中的object-fit属性，包括fill、contain、cover、none和scale-down等选项，以及它们如何影响背景图适应。同时提到了object-position属性，用于控制图片在盒子中的显示位置，其默认值为50% 50%，支持相对坐标设定。虽然IE浏览器可能不支持这两个属性，但它们对于解决图片和背景图的适应问题非常有用。
妈妈再也不用担心我的背景图适应问题
首先了解下object-fit的几个属性：
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
fill: 中文解析“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。
contain: 中文解析“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文解析“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见（上面讲解的例子就是如此）。
none: 中文解析“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文解析“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
object-position要比object-fit单纯的多，就是控制图片在盒子中显示位置的。默认值是50% 50%，也就是居中效果，下次要实现尺寸大小不固定图片的垂直居中效果，可以试试object-fit.
与background-position类似，object-position的值类型为类型值。也就是说，CSS3的相对坐标设定样式支持的。
这里就详细说了，自己可以动手试试。
<!DOCTYPE html>
<html lang="en">
<head>
<meta 
最低0.47元/天 解锁文章
2857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
