关于图片按比例自适应缩放
今天在看视觉规范的时候,大高走过来说 帮他们那边看一个问题。又是一个关于自适应的问题。不过,我喜欢。瞄了一下,需求是这样的:用户上传照片,照片的尺寸未知;需要生成一个预览,这个预览图 要根据提供给用户预览的区域自应用,并且居中;如果图片太大,需要按比例缩放。如下图。
瞄了一下,居中可以用 text-align:center; 来实现。而按比例缩放,利用预设 <img /> 的 width 、height 属性解决不了。因为用户图片可能是很长的,也可能是很宽的。在线上想了一下他们的关系,按条件来判断是这样的:
if(实际宽度 > 预览最大宽度) { 缩放宽度 = 预览最大宽度 } if(实际高度 > 预览最大高度) { 缩放高度 = 预览最大高度 }
但 是这样会有问题,比如当宽度和高度都被缩放,如果缩放比较不同,图片就不是按比例缩放,会变得非常丑。为了让它按比例缩放,就需要做各种判断了。那这样就 违背了我们希望程序自动化的原则了。再想想,虽然不喜欢数学,但数学还是很好用的,应该有其他办法。而既然是按比例缩放,何不用实际图像和预览区域宽度作 的比例来计算他们关系?hmmmm… 果然 OK。实际上我们永远都只需要缩放宽度或高度中的其中一个。因为比例只有大和小种情况。具体的,写一个函数来实现它吧:
/**
* 图片按比例自适应缩放
* @param img {Element} 用户上传的图片
* @param maxWidth {Number} 预览区域的最大宽度
* @param maxHeight {Number} 预览区域的最大高度
*/
var resizeImg = function(img, maxWidth, maxHeight){
var w = img.width,
h = img.height;
// 当图片比预览区域小时不做任何改变
if(w < maxWidth && h < maxHeight) return;
// 当实际图片比例大于预览区域宽高比例时
// 缩放图片宽度,反之缩放图片宽度
w/h > maxWidth/maxHeight ? img.width = maxWidth : img.height = maxHeight;
};
然后,看一下预览吧:关于图片按比例自适应缩放
引文来源 关于图片按比例自适应缩放 - 幸福收藏夹
转载于:https://www.cnblogs.com/webqiand/archive/2012/11/29/4609644.html
关于图片按比例自适应缩放相关推荐
- 微信小程序图片按比例自适应显示
小程序的图片默认大小为320px*240px,有时候需求要显示多张图片(每张图片的规格不一致)自适应屏幕的宽,不失真.这时候你第一反应肯定是写:widht:100%;hegiht:auto;很遗憾地告 ...
- img标签图片按照比例大小缩放
2019独角兽企业重金招聘Python工程师标准>>> 1.img标签图片按照比例缩放 例如:展示图片width:300px,height:200px; 设计图的尺寸可以为width ...
- 图片等比例缩放算法(计算缩放后的宽高)
让图片能够自适应父容器的宽高,并且保证图片不变形不溢出,那么就需要对图片进行等比例缩放,拿到缩放后的宽高重新赋值即可,具体算法如下: // 分别传入图片宽高.父容器宽高 const transform ...
- 微信小程序 图片等比例缩放(图片自适应屏幕)
index.wxml <!--图片宽高大于屏幕宽高--> <image style="width: {{imagewidth}}px; height: {{imagehei ...
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- iOS固定图片高度,宽度自适应缩放
当后台返回一张图片,但没有返回图片宽高尺寸时,需要我们 APP 来处理自适应显示. 1.首页我们可以在图片下载完的回调里,计算宽高,然后自己计算比例进行缩放. 2.如果是图片是显示在 tablevie ...
- CSS实现图片自适应缩放,填满容器
在项目中插入图片, 想按照图片比例自适应宽高缩放,填满容器 使用 object-fit: cover;即可实现 .goods_img {width: 100%;height: 100%;object- ...
- 如何让图片按比例响应式缩放、并自动裁剪的css技巧
如何让图片按比例响应式缩放.并自动裁剪的css技巧 同时也适用于一些轮播父容器响应式缩放 响应式网站.移动端页面在DIV CSS布局中对于图片列表或图片排版时, 如果想要图片按比例缩放, 最简单的就是 ...
- CSS图片定比例缩放
文章目录 前言 一.图片定比例缩放方案 1.padding(推荐) 2.根据width设置height 二.图片的路径 设置height百分比无效 前言 一张banner图,在不同的屏幕上铺满 宽度与 ...
最新文章
- 用了N年的接口,你知道接口是什么吗?——一个简单实例说明接口的伟大意义...
- 自定义ArcGIS JavaScript 工具条样式
- C语言 结构体里的元素前面有一点“.”代表什么意思?
- 文件传输_python socket实现文件传输(防粘包)
- 【Python】find()函数居然还能指定搜索的起点和终点?
- wxWidgets:wxGrid概览
- [JSOI2008]Blue Mary的战役地图——全网唯一一篇dp题解
- FFmpeg源代码:avcodec_receive_frame
- Web前端一种动态样式语言-- Less
- react学习(64)--简单的锚点封装
- [转载]细说Java反射
- mvc试图 下拉框不重复_面试前不巩固一下基础知识、刷刷题吗?
- Android设置按钮点击后变色(导航栏变色)
- 一次性下载CVPR2016的所有文章
- android APK加密、签名
- mes系统和plc通讯案例_MES管理系统怎么和PLC通信?
- 一线数据分析师教你如何写简历才能脱颖而出!
- java大鱼吃小鱼_大鱼吃小鱼Java课程设计
- Unity Shader Graph 制作 Fade 淡入淡出效果
- 88e1111的1000base-x to copper(GBIC)配置及使用
热门文章
- 程序员水平分级 你属于哪一类?
- 【LDA学习系列】神奇的Gama函数Python代码
- 【Python学习系列三】Windows下Python第三方常用库安装
- Leetcode 127. 单词接龙 解题思路及C++实现
- delphi 读取ini所有项_财务机器人真的会代替财务人员所有工作吗?
- 索引的使用—— 验证索引提升查询效率 || 避免索引失效 —— 全值匹配 /最左前缀法则/范围查询右边的列,不能使用索引/不要在索引列上进行运算操作/字符串不加单引号,造成索引失效
- Python的逻辑判断和循环 || 打印九九乘法表
- MySQL 语法问题:You can‘t specify target table ‘xxx‘ for update in FROM clause. 原因及解决方法
- Python+selenium 自动化-selenium的版本查看和升级
- 【upc 9541 矩阵乘法】非正解