CSS object-fit 对图片的处理

摘要: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:语法来调节图片,使其达到想要的效果


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_8297