巧用img的width和height属性进行缩图,使图片不变形
来源:互联网 发布:网络借贷资金存管业务 编辑:程序博客网 时间:2024/06/18 16:23
有如下几种情况:
1:要求图片以某个宽度显示,比如150. 则可以这样指定<img src="图片路径" width="150">
这样可以保证图片显示的宽度为150,而高度也会以等比例显示,最终显示的图片也不会变形。
2:同理要求以某个高度显示,比如150,这同样可以这样指定<img src="图片路径" heigh="150">
这样可以保证图片显示的高度为150,而宽度也会以等比例显示,最终显示的图片也不会变形。
3:要求图片以某个宽度和高度显示,比如150*150.
如果是动态页面,则很好办,可以事先在动态代码中算出缩图后的宽度和高度的,然后指定这个最接近的属性,就行了。
比如原始图片是1024*800的,则缩图因子=7(取1024/150和800/150的值中大的)。根据缩图因子得到原图缩图后是147*115.而缩图后的宽度是147,更接近要求的宽度150(缩图后的高度是115,相对要求的高度150差距较大)。所以可以这样指定<img src="图片路径" width="150">, 这样图片也不会变形,也保证了高度不会超过150。
当然,有人会说通过在img标签的onload事件处理缩图。这样也可以,但对于不同的浏览器,会得到不同的结果。在ie中,由于存在缓存,所以通过onload事件往往不起作用。除非加上防止缓存的代码!
阅读全文
0 0
- 巧用img的width和height属性进行缩图,使图片不变形
- 巧用img的width和height属性进行缩图,使图片不变形
- 巧用img的width和height属性进行缩图,使图片不变形
- img的width和height属性
- 去掉img标签里的width 和 height的属性
- <img> 标签的 height 和 width 属性设置图像的尺寸。
- java 字符串匹配 删除 img 的width height属性
- div的width和height属性
- java正则除去img中的height和width保留src属性
- canvas的width和height属性的特殊之处
- 关于控件的Left 、Top、Width和Height属性
- 浏览器 获取图片width 和height 的方法
- 使用@property 添加width 和 height 属性
- img标签该不该设置width和height
- 图片缩小(width height)
- .net 中如何得到图片的高度(height)和宽度(width) ,生成图片的缩略图
- min-height和min-width的用法
- 获取View的height 和width
- django 后台服务
- 请求访问数据 展示在listview上 多条目根据奇偶数
- 「Unity3D」(3)事件系统和EventSystem详细解读
- Java
- java 中 interger.parseInt和 interger.valueOf的区别
- 巧用img的width和height属性进行缩图,使图片不变形
- android模块配置文件build.gradle加中文备注
- java之枚举Enum
- 优化:梯度检验
- [训练测试过程记录]Text-Detection-with-FRCN
- 交叉编译选项解释
- 为什么你总成为不了架构师?
- js脚本中的地址跳转方式
- Spring与mybatis整合