摘要 今天小编跟大家讲解下有关CSS object-fit 对图片的处理 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS object-fit

今天小编跟大家讲解下有关CSS object-fit 对图片的处理 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS object-fit 对图片的处理 的相关资料，希望小伙伴们看了有所帮助。

object-fit:

指定可替换元素的内容应如何适应到需使用的高度和宽度确定的框

平时写代码经常会在代码中插入图片 你是否会多少感觉插入的图片被拉伸或是被缩放 在这里我们就探讨object-fit对图片处理的应用

语法及作用fill (充满)

整个对象将完全填充内容框。当对象的宽高与内容框不匹配 该对象将被拉伸以适应内容框

示例：

object-fit:fill; contain (包含)

内容将被缩放 以保持填充元素的宽高比。该对象在填充的时保持长宽比 因为宽高比可能不匹配 则会被添加元素外的“黑边”

示例：

object-fit:contain; cover (封面)

内容将保持宽高比 同时填充整个内容框。若该对象的宽高比与盒子高度不匹配 该对象将被裁剪以适应

示例：

object-fit:cover; none (没有)

没有被替换内容 尺寸不会发生改变

示例：

object-fit:none; scale-down (缩小比例)

内容的尺寸取none和contain中尺寸更小的那一个

示例：

boject-fit:scale-down

这里取得是object-fit:contain的效果

效果对比：小结：

可以根据object-fit:语法来调节图片 使其达到想要的效果

来源：爱蒂网