分享人:广州华软 佐罗

一. 前言

在前端开发过程中,设计稿中往往只提供一张图片,但是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. MTCNN算法与代码理解—人脸检测和人脸对齐联合学习

    目录 写在前面 算法Pipeline详解 如何训练 损失函数 训练数据准备 多任务学习与在线困难样本挖掘 预测过程 参考 博客:blog.shinelee.me | 博客园 | CSDN 写在前面 主 ...

  2. Unity3D开发游戏世界天空盒

    天空盒 , 顾名思义是 给游戏场景 添加一个 天空背景 让游戏更加精美,更具有魅力 添加天空盒 有两种方式 1 : 在当前相机上添加skybox 2 : 在当前场景上添加skybox 上面的两种方式的 ...

  3. 第2章 授权端点(Authorize Endpoint) - IdentityModel 中文文档(v1.0.0)

    对于大多数情况,OAuth 2.0和OpenID Connect授权端点的GET请求需要具有许多查询字符串参数. 虽然您可以使用任何方法创建带参数的URL来创建正确的字符串,但RequestUrl类是 ...

  4. 设计模式之结构类模式PK

    结构类模式包括: 适配器模式 桥梁模式 组合模式 装饰模式 门面模式 享元模式 代理模式 结构类模式着重于如何建立一个软件结构 为什么叫结构类模式呢? 因为他们都是通过组合类或对象产生更大结构以适应更 ...

  5. Git 学习总结

    概况 CVS 及 SVN 都是集中式的版本控制系统,而 Git 是分布式版本控制系统. 集中式版本控制系统最大的毛病就是必须联网才能工作: 分布式版本控制系统根本没有“中央服务器”,每个人的电脑上都是 ...

  6. PHP全栈学习笔记10

    php常量,常量是不能被改变的,由英文字母,下划线,和数字组成,但是数字不能作为首字母出现. bool define ( string $name , mixed $value [, bool $ca ...

  7. 第3章 简单的C程序设计——顺序程序设计

    3.1 顺序程序设计举例 例:有人用温度计测量出用华氏法表示的温度(如64F),今要求把它转换为一摄氏法表示的温度(如17.8C) 解题思路:问题的关键在于找到两者的转换公式.根据物理学知识,公式为c ...

  8. Docker 上传镜像

    文章首发自个人网站:https://www.exception.site/docker/docker-push-image 本文中,您将学习如何上传 Docker 镜像至 Docker Hub 上. ...

  9. 【社群话题分享】你的网站 HTTPS 了吗?

    每周三下午的话题活动是又拍云技术社群的优良传统-大家一起来看看这周都聊了些啥吧! 推荐阅读: 当 “HTTP” 先生遇上“S”小姐 了解 HTTPS,读这篇文章就够了 HTTPS 是什么? HTTPS ...

  10. 死磕 java集合之ConcurrentHashMap源码分析(一)

    开篇问题 (1)ConcurrentHashMap与HashMap的数据结构是否一样? (2)HashMap在多线程环境下何时会出现并发安全问题? (3)ConcurrentHashMap是怎么解决并 ...