移动端 图片优化

项目场景:

在移动端开发,加载图片并保持图片不变形是非常重要的,也是一名前端必备和经常打交道的内容。以下是自己对图片加载是变形的处理?


问题和解决方法

移动端加载图片,不同的手机,图片的展示不一样;常规的是375*750;而有些手机是其他尺寸,如何让手机上图片显示不变形呢?

1、移动端用相对高度rem。当图片的分辨率发生变化时,可以根据屏幕的分辨率进行自动调整图片的高宽。

2、在后端上传时,固定图片的宽高比率:如375/750(宽/高),保证后端上传的图片都是这种尺寸,具体的尺寸,根据UI的设计确定。

3、在开发时,用标准规格进行开发,并以标准规格比率设置图片的宽度和高度。

相关推荐

  1. 移动 图片优化

    2024-07-16 15:40:04       16 阅读
  2. 移动手签-图片base64旋转功能

    2024-07-16 15:40:04       57 阅读
  3. Vue 3实现的移动两指控制图片缩放功能

    2024-07-16 15:40:04       64 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-16 15:40:04       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-16 15:40:04       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-16 15:40:04       58 阅读
  4. Python语言-面向对象

    2024-07-16 15:40:04       69 阅读

热门阅读

  1. Python中的random模块及相关模块详解

    2024-07-16 15:40:04       21 阅读
  2. 算力是什么?人工智能需要用到算力吗

    2024-07-16 15:40:04       22 阅读
  3. Android焦点之FocusWindow切换流程

    2024-07-16 15:40:04       20 阅读
  4. 观察者模式:构建响应式系统的基石

    2024-07-16 15:40:04       25 阅读