分享人:广州华软 佐罗

一. 前言

在前端开发过程中,设计稿中往往只提供一张图片,但是app内需要用到的尺寸各种各样。

同时图片不仅是信息的直接表达,也会为网站起到美观点缀的作用,图片的变形、过分裁切会引起用户吐糟,给用户带来不好的用户体验.

这该如何是好,难道真的要设计多个尺寸或者后台添加多个上传尺寸,其实未然

二. 目录

1. 避免一图多尺寸

2. 归纳图片比例

3. 前端实现

3.1 实现方法

3.2 示例

4.总结

三. 避免一图多尺寸

一张图片在网站里可能会有多个展示位,尽量保持一个尺寸。如果不能保持一个尺寸,也尽量按原大图进行比例缩放。纵观多图的网站,大多都会尽量一个图只有一个尺寸,然后同比缩放。

四. 归纳图片比例

在设计的时候就先列出了图片的所有可能出现的位置,决定进行统一比例的设计,就是所有图都是按照比例去设计。这样图片可以完美适配手机屏幕,简单统一。

五. 前端实现

5.1 实现方法

利用css提供的position、overflow 与transform 属性来实现图片保持居中不变行并适当隐藏部分图片内容。

1. Position:该属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

2. Overflow:该属性规定当内容溢出元素框时发生的事情。

3. Transform:该属性允许我们对元素进行旋转、缩放、移动或倾斜。

5.2 示例

正常情况

处理后的情况

六. 总结

按照上述方法来,关于图片适配不同尺寸的image View就有个完美的解决,其中尺寸选择这个需要花点来拿捏,轻车熟路之后,再也不担心设计稿一图多用了

关于图片适配不同尺寸的image View(实战)的更多相关文章

  1. iOS 新手引导页图片适配及其尺寸大全

    早期新手引导页只需要几张图片就可以解决了,随着屏幕尺寸的的越来越多,新手引导页的尺寸适配起来越来越麻烦,否则就会出现尺寸不匹配,图片被拉伸的情况 目前应该是有2种方法来解决这个问题 方法1: 根据每款 ...

  2. 【iOS 开发】iOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)

    一. iOS 项目简介 1. iOS 文件简介 创建一个 HelloWorld 项目, 在这个 IOS 项目中有四个目录 : 如下图; -- HelloWorldTests 目录 : 单元测试相关的类 ...

  3. iOS 实现启动屏动画(Swift实现,包含图片适配)

    代码地址如下:http://www.demodashi.com/demo/12090.html 准备工作 首先我们需要确定作为宣传的图片的宽高比,这个一般是与 UI 确定的.一般启动屏展示会有上下两部 ...

  4. ios开发之--新手引导页图片适配方案

    1,图片适配,最早以前是自己命名规范,例如@1x,@2x,@3x等,3套图基本上就够用了 2,在iPhone X之后,需要适配的图就多了,因为分辨率增多了,屏幕尺寸也增多了 3,尺寸 :640*960 ...

  5. JavaScript获取图片的原始尺寸

    页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下 <img src="http://img11.360buyimg.com/da/g14/M07/ ...

  6. 如何用JavaScript在浏览器端获取图片的原始尺寸大小?

    var img = $("#img_id"); // Get my img elem var pic_real_width, pic_real_height; $("&l ...

  7. Python3.7 练习题(三) 将指定目录下的图片进行批量尺寸大小处理

    # 将指定目录下的图片进行批量尺寸大小处理 #修改图片尺寸 导入Image os 快捷键 alt+enter import os from PIL import Image def process_i ...

  8. Python批量修改图片格式和尺寸

    Python批量修改图片格式和尺寸 备注: 1.导入了PIL库,是处理图片用的,很强大; 2.导入了的win32库,是判断隐藏文件用的,我们的项目需要删除隐藏文件,不需要的可以直接找到删除. 3.导入 ...

  9. java 获取图片大小(尺寸)

    1,获取本地图片大小(尺寸) File picture=new File(strSrc);BufferedImage sourceImg=ImageIO.read(new FileInputStrea ...

随机推荐

  1. java到底是引用传递还是值传递?

    今天我们来讲讲一个在学习中容易误解的问题,面试中也偶尔问到,java方法调用时到底是值传递还是引用传递? 首先,请大家来做一个判断题,下面的3个问题是否描述正确 1. java基本数据类型传递是值传递 ...

  2. 什么是TensorFlow?

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 回顾前面: 从零开始学TensorFlow[01-搭 ...

  3. EIGRP 基础实验

    一.环境准备 1. 软件:GNS3 2. 路由:c7200 二.实验操作 实验要求: 1.掌握EIGRP 的基本配置 2.掌握EIGRP 的通配符掩配置方法 3.掌握EIGRP 的自动汇总特性,理解E ...

  4. Java对字符串加密并返回星号※

     If you don't look back, you'll never know I waiting for you behind you. Java对字符串加密并返回星号※ PasswordUt ...

  5. RxJava操作符的简单使用

    一.准备工作在app的build.gradle文件下的dependencies中添加依赖: compile 'io.reactivex:rxjava:1.3.0' compile 'io.reacti ...

  6. bat脚本自定义魔兽warIII运行分辨率,去黑边

    我们一般平时安装完WarIII后运行时的分辨率默认是800*600,导致有黑边的存在.所以我写了一个bat脚本来自定义WarIII的运行分辨率.需要以管理员身份运行. 下载链接: 链接:https:/ ...

  7. .net momeryStream 读取为空问题

    问题 stream读取错误 我需要把用户上传的图片,加水印,然后保存到阿里云的oss.保存成功,但是保存的数据为空.唯一的异常 :ReadTimeout = “newPicStream.ReadTim ...

  8. Video/Audio禁止快进(退)

    首先接着上个随笔.上个随笔主要介绍了视频音频的相关操作.属性和方法.这里主要记录一个应用:禁止快进(快退同理). 思路:监听快进事件(此处是监听播放时间更新),利用一个缓存的时间和播放到的时间进行对比 ...

  9. WireShark捕获HTTPS

    firefox,chrome会将 TLS 会话中使用的对称密钥保存在外部文件中. 1.建立环境变量 linux,mac 使用export建立变量:export SSLKEYLOGFILE=/tmp/s ...

  10. ASP.NET Aries 高级开发教程:Excel导入之多表高级导入配置(中)

    前言: 在面对Excel的各种复杂导入情况中,多表导入是很常见的情景. 今天就来写一下多表导入是如何配置的. 1.自定义导入模板 怎么自定义: 其实就是自己新建一个Excel了,把列头都写好. 不过有 ...