页面中获取了一个图片的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...
如有必要,图像会自动旋转以在网络上正确显示(例如,带有旋转提示的iPhone照片正面朝上) 图像宽度,图像高度和正确的文件扩展名可供开发人员使用 还支持非图像文件 可以禁用和重新启用对文件的Web访问 支持GIF...
更改图片大小对于照片是很重要的,如果不这样,那么windows打开原始分辨率的图片将会比较的慢,并且显示的话也只可以看到图片一部分,即使合适屏幕查看,由于需要缩放,在性能较差的电脑上会出现较长时间卡、顿的...
201 PSDRAG 控制PostScript图像显示 202 PSETUPIN 导入自定义页面设置 203 PSFILL 用PostScript图案填充二维多段线 204 PSIN 输入PostScript文件 205 PSOUT 输出PostScript文件 206 PSPACE PS 从模型...
可通过移动、缩放和旋转等操作设置图片的裁剪区域 13.可实时多尺寸预览裁剪图片区域. 14.可通过异步提交裁剪的图片到服务器(接口) 14:支持上传图片个数(企业版本) 安装及部署: 1.上传到 apache,iis,tomcat ...
Webview WebView(网络视图)能加载显示网页,可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页 Activity Activity是一个应用程序组件,提供一个屏幕,用户可以用来交互为了完成某项任务,是一个负责与...
前言 ...第15章 文字和图像显示 第16章 音频和视频 第17章 网络通信 第18章 数据库管理 第19章 数据库访问 第20章 数据库查询 第21章 Word和Excel应用 第22章 WMI查询和管理 第23章 注册表综合应用
强大的功能:原图支持本地上传、视频拍照和网络加载,图片编辑有缩放、裁剪、旋转、定位和调色等功能。 丰富的接口:可自定义头像(大小、数目...)、所有文本(包括其字体,大小,颜色,方便扩展多语言站点)、可...
系统路径下如果存在bg.png文件,则会作为欢迎界面的背景图片显示(右下角) 减少跳转及翻页中出现乱码的机率 提高阅读时绘图效率,滚屏效率同样提高 播放时,暂停会导致声音爆至最大的BUG 内置“忘记月亮”制作的两款...
103 <br>0167 锁定文本框内的文本 103 <br>0168 使用Message.Show输出用户信息 104 <br>5.3 图片数据处理技巧 104 <br>0169 如何将图片存入数据库 104 <br>0170 如何将图片从数据库中读取...
内容模式与比例缩放 52 自动尺寸调整行为 54 创建和管理视图层次 55 创建一个视图对象 57 添加和移除子视图 57 视图层次中的坐标转换 60 标识视图 61 在运行时修改视图 61 实现视图动画 61 响应布局的变化 63 重画...
52.可以同时下载多张网络图片到空间,并可设置水印等功能。 53.上传时可自由设置是否在照片上添加文字水印、图片水印或不添加水印。 54.用户分组设置,可分多组域名及多台服务器协同管理。 55.仅需为程序目录及用户...
004 如何使用资源串动态显示消息框内容? 005 如何使消息框显示问号图标? 006 如何使消息框显示“是/否”按钮? 007 如何使消息框显示“重试/取消”按钮? 第2章 常用控件 008 如何使用滑块控件? 009 如何使用标签...
|--图片的缩放处理(防内存溢出) |--多媒体应用设计图 |--多线程下载 |--多线程下载及断点续传 |--多线程之AsyncTask的用法 |--多线程之线程池ExecutorService |--字体为粗体 |--安卓下的多线程断点上传 |--对话框与...
取十进制 取图片尺寸 取文件版本信息 取系统目录 取系统启动时间 取系统信息 取系统字体列表1.2 取用户机器码模块 取注册表键句柄 全面操作SQL Server 2000 R RAR压缩模块 1.0 RC4 加密算法 1.0 RC4-林子深 ...
可以控制图片的时长,增加字幕和特效,并且使用转场特效实现图像和视频之间的自然切换。 形象价值 通过摄像头和屏幕录制的完美结合,您可以创建个人视频博客,可以在制作教育内容的时候同时保持和学生交流,在录制...
10_LimitSize 限制窗体的最大和最小尺寸。 11_AutoPos 让窗体具有停靠效果。 12_EnumWnd 枚举系统中的窗口。 第5章(\ Chapter05) 示例描述:本章介绍创建对话框以及通用对话框的使用技巧。 01_ModalDlg...