仿微信小程序 aspectFitImg 算法,完美适配全尺寸公司Logo的处理

小程序的i ** ge部件中,有一个mode属性,其设定如下所示:

mode 有 13 种方式,在其中 4 种是放缩方式,9 种是剪裁方式。

不维持纵横比放缩图片,使图片彻底融入

维持纵横比放缩图片,使图片的长边能彻底显示出去(图片可详细显示,环境地区有空出)

维持纵横比放缩图片,只确保图片的短边能彻底显示出去(图片被裁剪,遗失一部分內容)

在小程序网页页面开发设计时,以制作公司logo为例子,

(Logo和公司名称在视觉效果上极致左两端对齐)

针对企业Logo那样的图案设计,是务必详细显示并维持占比的,一切对信息的裁剪或比例失衡全是没法让人接纳的。

为达到这种实际效果,大家通常的作法是:立即特定图片原素的显示方式为aspectFit模式,随后将企业Logo和公司名称左两端对齐。

可是那样会造成排版设计上的缺陷,例如:

假定图片的缺省占位高宽为:100px * 40px;可是从互联网载入的图片具体仅有40px * 40px

那麼具体图片的水准定位点将在占位总宽(100px)的水准正中间两端对齐显示,看上去就仿佛具体图片左侧被空出了30px的总宽,即:(100-40)/2,而这样的事情并不是大家需要的,由于大家需要的是以视觉效果上看,图片和下边的原素应当可以左两端对齐,而不是仅从CSS的角度看来2个原素是左两端对齐的;

logo图片占位和公司名称在CSS的方面左两端对齐,可是从视觉效果上看来,logo和公司名称并沒有左两端对齐;

(1)最先,在CSS中应用默认设置的占位宽高来设置图片的显示属性,比喻:{100px,40px},并设定数据信息关联属性;(2)从互联网下载图片,随后依据{100,40}这一原始限制来测算将具体图片(可能是400px * 400px)缩放进恰好能塞入这一占位框里时图片应当被显示的规格,即(40px * 40px);(3)应用小程序中css属性关联的体系来改动占位框的间距和相对高度;将要{100px * 40px}动态性改动为 {40px * 40px};

在小程序中设定css属性关联、免费下载图片并获得图片的高宽信息内容等都是有现有的办法和健全的API表明文本文档,不会再启齿,仅列举那一个aspectFitImg的方式。

消耗了30分鐘修改论文,午餐得加个鸡肉奖赏一下自身..

扫码免费用

源码支持二开

申请免费使用

在线咨询