`
tara1128
  • 浏览: 26017 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

对网络图片显示的尺寸缩放的处理

阅读更多
页面中获取了一个图片的URL,
然后赋值给img元素的src属性,
图片即可显示在页面中。

但是在页面中显示时,
如果需要对显示图片的尺寸做限制,
就需要一些额外的处理了,
同时也要考虑到图片加载甚至异步的问题。

我们可以在img的onload里写一个function:
<img src="" onload="imgOnload(this)" />
然后对这个function做一些定义:
function imgOnload( el ){
  var w = el.width, h = el.height; //在onload里可以直接拿到img的width和height
  if( w > h ){  //对宽高做一下比较
    el.height = 296; //重写img的height
  }else{
    el.width = 296; //重写img的width
  }
}

这样一来,当图片是一个扁形的(w > h),
则把高设置为目标尺寸,
如果图片是一个长条形的(h > w),
则把宽设置为目标尺寸。

以上的变化,只设置宽高其中一个属性,
另外一个属性,是可以自动的等比缩放的。

一定要在onload里去做这件事。
分享到:
评论

相关推荐

    图形图像处理实用教程

    计算机图形图像处理软件的种类很多,本书在简单介绍图形图像处理基本概念的基础上,介绍了目前流行的图像处理软件Photoshop、图形绘制软件CorelDRAW和网络图像处理软件Fireworks。其中,以图像处理软件Photoshop6.0...

    uploadfs:将文件存储在可通过网络访问的位置。 包括S3,Azure和基于本地文件系统的后端。 也可以缩放和自动旋转图像文件。 易于创建其他存储和图像处理后端

    如有必要,图像会自动旋转以在网络上正确显示(例如,带有旋转提示的iPhone照片正面朝上) 图像宽度,图像高度和正确的文件扩展名可供开发人员使用 还支持非图像文件 可以禁用和重新启用对文件的Web访问 支持GIF...

    摄影大师都在用的图片无损压缩软件EasyImageModifier.rar

    更改图片大小对于照片是很重要的,如果不这样,那么windows打开原始分辨率的图片将会比较的慢,并且显示的话也只可以看到图片一部分,即使合适屏幕查看,由于需要缩放,在性能较差的电脑上会出现较长时间卡、顿的...

    autocad命令全集

    201 PSDRAG   控制PostScript图像显示 202 PSETUPIN   导入自定义页面设置 203 PSFILL   用PostScript图案填充二维多段线 204 PSIN   输入PostScript文件 205 PSOUT   输出PostScript文件 206 PSPACE PS 从模型...

    Flash头像上传剪裁预览组件 v2.0.rar

    可通过移动、缩放和旋转等操作设置图片的裁剪区域 13.可实时多尺寸预览裁剪图片区域. 14.可通过异步提交裁剪的图片到服务器(接口) 14:支持上传图片个数(企业版本) 安装及部署: 1.上传到 apache,iis,tomcat ...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    Webview WebView(网络视图)能加载显示网页,可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页 Activity Activity是一个应用程序组件,提供一个屏幕,用户可以用来交互为了完成某项任务,是一个负责与...

    Visual C++编程技巧精选集 光盘

    前言 ...第15章 文字和图像显示 第16章 音频和视频 第17章 网络通信 第18章 数据库管理 第19章 数据库访问 第20章 数据库查询 第21章 Word和Excel应用 第22章 WMI查询和管理 第23章 注册表综合应用

    富头像上传编辑器演示

    强大的功能:原图支持本地上传、视频拍照和网络加载,图片编辑有缩放、裁剪、旋转、定位和调色等功能。 丰富的接口:可自定义头像(大小、数目...)、所有文本(包括其字体,大小,颜色,方便扩展多语言站点)、可...

    手机 pdf 阅读器

    系统路径下如果存在bg.png文件,则会作为欢迎界面的背景图片显示(右下角) 减少跳转及翻页中出现乱码的机率 提高阅读时绘图效率,滚屏效率同样提高 播放时,暂停会导致声音爆至最大的BUG 内置“忘记月亮”制作的两款...

    C#编程经验技巧宝典

    103 &lt;br&gt;0167 锁定文本框内的文本 103 &lt;br&gt;0168 使用Message.Show输出用户信息 104 &lt;br&gt;5.3 图片数据处理技巧 104 &lt;br&gt;0169 如何将图片存入数据库 104 &lt;br&gt;0170 如何将图片从数据库中读取...

    iPhone应用程序开发指南.中文.pdf

    内容模式与比例缩放 52 自动尺寸调整行为 54 创建和管理视图层次 55 创建一个视图对象 57 添加和移除子视图 57 视图层次中的坐标转换 60 标识视图 61 在运行时修改视图 61 实现视图动画 61 响应布局的变化 63 重画...

    桃源相册管理系统v2.3

    52.可以同时下载多张网络图片到空间,并可设置水印等功能。 53.上传时可自由设置是否在照片上添加文字水印、图片水印或不添加水印。 54.用户分组设置,可分多组域名及多台服务器协同管理。 55.仅需为程序目录及用户...

    Visual C++编程技巧精选500例.pdf

    004 如何使用资源串动态显示消息框内容? 005 如何使消息框显示问号图标? 006 如何使消息框显示“是/否”按钮? 007 如何使消息框显示“重试/取消”按钮? 第2章 常用控件 008 如何使用滑块控件? 009 如何使用标签...

    黑马程序员 安卓学院 万元哥项目经理 分享220个代码实例

    |--图片的缩放处理(防内存溢出) |--多媒体应用设计图 |--多线程下载 |--多线程下载及断点续传 |--多线程之AsyncTask的用法 |--多线程之线程池ExecutorService |--字体为粗体 |--安卓下的多线程断点上传 |--对话框与...

    易语言540个易模块

    取十进制 取图片尺寸 取文件版本信息 取系统目录 取系统启动时间 取系统信息 取系统字体列表1.2 取用户机器码模块 取注册表键句柄 全面操作SQL Server 2000 R RAR压缩模块 1.0 RC4 加密算法 1.0 RC4-林子深 ...

    ACDSee飞鸟简辑专业版 ACDSee Video Studio 4.0.0.872 x64 中文汉.zip

    可以控制图片的时长,增加字幕和特效,并且使用转场特效实现图像和视频之间的自然切换。 形象价值 通过摄像头和屏幕录制的完美结合,您可以创建个人视频博客,可以在制作教育内容的时候同时保持和学生交流,在录制...

    vc实例精通源码,windows基本控件的使用Demo

    10_LimitSize 限制窗体的最大和最小尺寸。 11_AutoPos 让窗体具有停靠效果。 12_EnumWnd 枚举系统中的窗口。 第5章(\ Chapter05) 示例描述:本章介绍创建对话框以及通用对话框的使用技巧。 01_ModalDlg...

Global site tag (gtag.js) - Google Analytics