打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
动态页设置图片显示尺寸的简便方法
标题
在这里写日志
 来源地址:
 
动态页设置图片显示尺寸的简便方法
有很多人问到,在网站应用中,由于图片是后台增加的,图片的宽度和高度大小都不一致,如何使图片在前台显示的大小都保持一至,且不能变形(就像windows图片文件夹里的缩略图一样)。对于这个问题,下面有两种很简单的实现办法。
首先我们来分析一下应该怎样实现,首先图片大小是未知的,要让图片在网页中显示固定大小而不变形,就不能用平常的width=".." height="..."来控制了。而有人说,只设置图片的宽,而不设置图片的高,或只设置图片的高,而不设置图片的宽就行了。对于这种处理方式,仔细想想也行不通。因为这样虽然使图片的显示比例与图片的实际大小的比例一致,但无法保证图片在网页中显示的大小一样大。而我们应该用下面这样的思路来做:
(假设我们想让网页中图片的最大宽度或最大高度不能超过120像素。)
先判断图片的宽度和高度,如果宽度大于高度,就设置图片的宽度为120(width="120"),这样,由于高度比宽度小,所以图片的长宽都在120像素以内。保证了图片的大小范围在120*120像素内 。同理,如果图片的高度大于宽度,就应指定图片的高度为120(height="120")。这样,所有图片的大小都在这个范围之内。而要实现这样的效果,我们现在最大的问题是怎样取得图片的宽和高。有了思路,下面我提供了两种最简单的方法:
一、利用ASP FSO来取的图片图片的宽度和高度,然后再按上面的思路,输出图片,此方法略。
二、利用javascript结合图片的onload事件来实现。
这种方法非常简单,onload作为img元素的标准事件,您完全可以用以下非常简单的代码来实现,
示例代码如下:
<img src="图片地址" onload="if(this.width>this.height){this.width=120;}else{this.height=120;}">
说明:以上img标签中不能再指定width 和height属性,否则脚本程序就没有什么作用了。
有些网友也是利用javascript来实现,但其中有些代码会被最新的IE或IE补丁所阻止,推荐采用以上第二种办法。
以上源自Alex blog,有删节。
 来源地址:
 
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
CSS控制图片大小
javascript图片预加载技术
图片预加载的一个简明例子
JS学习10:图片预加载读取图片尺寸
JavaScript获取页面图片原始尺寸
一段横向排列多图滚动代码;
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服