深圳实力网站建设,做网站要学的代码,平台搭建与拆除,网站源码推荐一、问题产生的场景 近期在完成项目开发时#xff0c;测试人员针对漫画长图上传后的展示提出了一个界面优化的点#xff0c;因为其特点是长#xff0c;但是我们展示图片的区域是固定的#xff0c;如果我们按照正常思路将图片的宽高写死#xff0c;确实占位大小的问题解决了…一、问题产生的场景 近期在完成项目开发时测试人员针对漫画长图上传后的展示提出了一个界面优化的点因为其特点是长但是我们展示图片的区域是固定的如果我们按照正常思路将图片的宽高写死确实占位大小的问题解决了但是当我们上传一个长图现在我们会发现这个图片是被拉变形了的如图1.1所示这个时候我们想要使图片不因固定宽高而造成变形就可以使用object-fitcover来实现这个效果如图1.2所示当然该属性的属性值还有其他下面我们一起来了解一下当同一张图片使用不同属性值的时候会有什么样的展示效果。 图1.2 图1.1 二、object-fit的各个属性的作用
1.contain被替换的内容将被缩放以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比因此如果宽高比与框的宽高比不匹配该对象将被添加“留白”
如下图所示 2.cover被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配该对象将被剪裁以适应内容框
如下图所示 3.fill被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配那么该对象将被拉伸以适应内容框
如下图所示 4.none被替换的内容将保持其原有的尺寸
如下图所示 5.scale-down内容的尺寸与 none 或 contain 中的一个相同取决于它们两个之间谁得到的对象尺寸会更小一些
如下图所示 附element中的image组件有对应的属性设置为fit其属性值与原生的object-fit的属性值及效果完全相同
