关于图片适配不同尺寸的image View(实战)
分享人:广州华软 佐罗
一. 前言
在前端开发过程中,设计稿中往往只提供一张图片,但是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(实战)的更多相关文章
- iOS 新手引导页图片适配及其尺寸大全
早期新手引导页只需要几张图片就可以解决了,随着屏幕尺寸的的越来越多,新手引导页的尺寸适配起来越来越麻烦,否则就会出现尺寸不匹配,图片被拉伸的情况 目前应该是有2种方法来解决这个问题 方法1: 根据每款 ...
- 【iOS 开发】iOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)
一. iOS 项目简介 1. iOS 文件简介 创建一个 HelloWorld 项目, 在这个 IOS 项目中有四个目录 : 如下图; -- HelloWorldTests 目录 : 单元测试相关的类 ...
- iOS 实现启动屏动画(Swift实现,包含图片适配)
代码地址如下:http://www.demodashi.com/demo/12090.html 准备工作 首先我们需要确定作为宣传的图片的宽高比,这个一般是与 UI 确定的.一般启动屏展示会有上下两部 ...
- ios开发之--新手引导页图片适配方案
1,图片适配,最早以前是自己命名规范,例如@1x,@2x,@3x等,3套图基本上就够用了 2,在iPhone X之后,需要适配的图就多了,因为分辨率增多了,屏幕尺寸也增多了 3,尺寸 :640*960 ...
- JavaScript获取图片的原始尺寸
页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下 <img src="http://img11.360buyimg.com/da/g14/M07/ ...
- 如何用JavaScript在浏览器端获取图片的原始尺寸大小?
var img = $("#img_id"); // Get my img elem var pic_real_width, pic_real_height; $("&l ...
- Python3.7 练习题(三) 将指定目录下的图片进行批量尺寸大小处理
# 将指定目录下的图片进行批量尺寸大小处理 #修改图片尺寸 导入Image os 快捷键 alt+enter import os from PIL import Image def process_i ...
- Python批量修改图片格式和尺寸
Python批量修改图片格式和尺寸 备注: 1.导入了PIL库,是处理图片用的,很强大; 2.导入了的win32库,是判断隐藏文件用的,我们的项目需要删除隐藏文件,不需要的可以直接找到删除. 3.导入 ...
- java 获取图片大小(尺寸)
1,获取本地图片大小(尺寸) File picture=new File(strSrc);BufferedImage sourceImg=ImageIO.read(new FileInputStrea ...
随机推荐
- MongoDB 小记
之前本人说过一款非关系型数据库的代表 Redis 的 < Redis 小记 >文章,觉得意犹未尽,今天就来介绍一款数据库 MongoDB ,先来看一下 MongoDB是一款基于分布式文件存 ...
- asp.net core系列 45 Web应用 模型绑定和验证
一. 模型绑定 ASP.NET Core MVC 中的模型绑定,是将 HTTP 请求中的数据映射到action方法参数. 这些参数可能是简单类型的参数,如字符串.整数或浮点数,也可能是复杂类型的参数. ...
- 【野草】SQL Server之索引解析(一)
1.写在前面 微软专门给出SQL Server设计思路及实现路线,从7大体系结构阐述是如何实现,通过了解这些,我们就可以总结出数据库设计原则.编程中sql写法及注意事项,从而优化我们的系统性能,本系列 ...
- 第9章 设备授权端点(Device Authorization Endpoint) - IdentityModel 中文文档(v1.0.0)
OAuth 2.0设备流设备授权的客户端库是作为HttpClient扩展方法提供的. 以下代码发送设备授权请求: var client = new HttpClient(); var response ...
- Eureka注册客户端
1.pom.xml <dependency> <groupId>org.springframework.cloud</groupId> <artifactId ...
- 简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...
- Odoo开源智造IT经理人创业圆梦计划正式启动
概念定义 IT经理人创业圆梦计划是什么? 甲方IT经理人的行业背景 + 其他甲方需求及可靠信任的线索资源 = 自主创业圆梦计划 具体措施 甲方IT经理人的职业行业背景取得其他甲方需求线索及信任——通过 ...
- 深入分析Java I/O 工作机制
前言 : I/O 问题是Web 应用中所面临的主要问题之一.而且是任何编程语言都无法回避的问题,是整个人机交互的核心. java 的I/O类操作在java.io 包下,将近80个子类, 大概可以分成 ...
- 我的Windows日常——鼠标无法进行拖拽的解决方法
方法1: 鼠标右键单击任务栏 选择属性,进入任务栏和开始菜单属性 点击「开始」菜单 进入分页,单击自定义 找到并勾选启用上下文菜单和拖放 一路确定.... --------------------- ...
- asp.net core 2.0的认证和授权
在asp.net core中,微软提供了基于认证(Authentication)和授权(Authorization)的方式,来实现权限管理的,本篇博文,介绍基于固定角色的权限管理和自定义角色权限管理, ...