项目场景:
在移动端开发,加载图片并保持图片不变形是非常重要的,也是一名前端必备和经常打交道的内容。以下是自己对图片加载是变形的处理?
问题和解决方法
移动端加载图片,不同的手机,图片的展示不一样;常规的是375*750;而有些手机是其他尺寸,如何让手机上图片显示不变形呢?
1、移动端用相对高度rem。当图片的分辨率发生变化时,可以根据屏幕的分辨率进行自动调整图片的高宽。
2、在后端上传时,固定图片的宽高比率:如375/750(宽/高),保证后端上传的图片都是这种尺寸,具体的尺寸,根据UI的设计确定。
3、在开发时,用标准规格进行开发,并以标准规格比率设置图片的宽度和高度。