在日常的需求中,有这么一个场景:
文本中可能会穿插一些图片,但是这个图片的大小啊长宽比啊什么的 都是不确定的。
但我们要它美观啊,好看啊,所以要给它一个确定的大小,但同时让展示出来效果尽可能是图片的主体而不是边边角角。
这时候,有一个不常见的利器了 object-fit
mdn的官方解释是 指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
其属性值有
fill:被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配,那么该对象将被拉伸以适应内容框。
contain:被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。
cover:被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象将被剪裁以适应内容框。
none:被替换的内容将保持其原有的尺寸。
scale-down:内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。
而我在开头提到的需求场景是可以用cover属性值来实现了~
css果然是博大精深啊
值得好好学习
mdn地址