原理是在页面载入完成后(onload触发)在客户端使用Javascript读取每张图片的大小并进行缩放。
//将imageDest图片的大小按比例缩放,适合显示在宽W和高H的区域内
function ResizeImage(imageDest, W, H)
{
//显示框宽度W,高度H
var image = new Image();
image.src = imageDest.src;
if(image.width>0 && image.height>0)
{
//比较纵横比
if(image.width/image.height >= W/H)//相对显示框:宽>高
{
if(image.width > W) //宽度大于显示框宽度W,应压缩高度
{
imageDest.width = W;
imageDest.height = (image.height*W)/image.width;
}
else //宽度少于或等于显示框宽度W,图片完全显示
{
imageDest.width = image.width;
imageDest.height = image.height;
}
}
else//同理
{
if(image.height > H)
{
imageDest.height = H;
imageDest.width = (image.width*H)/image.height;
}
else
{
imageDest.width = image.width;
imageDest.height = image.height;
}
}
}
}
以上函数对图片进行缩放。
golf网站的每张缩略图的id都设为imgProductItem,如:<img src="<%= imgPath %>" name="imgProductItem" width="150" height="113" border="0" id="imgProductItem" />,里面的150x113就是显示框的最大尺寸,因为处理函数必须在onload完成时运行,所以这里必须设置一定的大小,要不整个页面在载入图片过程中出现排版错乱,到运行了RsizeAllImageById才恢复正常。
添加一个批量操作的函数:
//将页面内所有指定id的图片按比例缩放
function RsizeAllImageById(id, W, H)
{
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length; i++)
{
if(imgs[i].id == id)
{
ResizeImage(imgs[i], W, H);
}
}
}
这样在页面的body添加:<body onload="javascript:init();">;在head区添加:
<script language="javascript">
<!--
function init()
{
RsizeAllImageById("imgProductItem", 150, 113);
}
-->
</script>
就可以将所有图片显示成缩略图了。
分享到:
相关推荐
图片等比例缩放 (作者:back_crying) 1、先创建一个隐藏的img对象来获取图片的实际尺寸 2、根据限制的大小反复判断,图片能够显示的最大尺寸 3、设置图片尺寸和周围的占位,避免页面变形 4、删除隐藏的img对象 (注:...
js等比例缩放页面图片大小 // JavaScript Document function handle_img(tagimg_name,tagimg_width,tagimg_height){ var img_object=new Image(); var get_imgs=document.getElementsByName(tagimg_name); for...
主要介绍了vue实现图片按比例缩放问题操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
主要介绍了JS实现控制图片显示大小的方法,即实现图片等比例缩放功能,涉及JS动态操作页面元素属性相关技巧,需要的朋友可以参考下
此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大高 height 图片最大宽 loadpic 加载...
所以将上传的图片直接显示成缩略图,就需要按比例缩放了,前提是要获取图片的长宽,第一个想到的方法是在上传的时候通过ADODB.STREAM对象读取图片的长宽信息保存在数据库并在页面生成的时候读取出来计算比例。...
v0.0.5新增:可设置缩放比例、缩放动画时间。 v1.2.0新增:可设置多种加载策略(仅普清、仅原图、手动模式、网络自适应) v1.2.1修复可能与app冲突的部分 v1.2.2新增:长图(宽高比大于等于3的图)默认宽度放大到...
这是一个支持手机显示网页,图片能够等比例缩放。简单的小例子,内含css
10.强大的在线图片编辑功能(缩放,旋转,水印,裁剪)。 11.类似Windows中的图片缩略图预览模式,方便查看图片。 12.注册用户有二级域名空间可以让访客随时访问自己的空间进行查看及留言。 13.可自由设定相册中的照片...
目前,它可能缺少某些功能,例如自定义缩放比例或旋转角度,但其目的是保持轻巧和可预测。 由于我个人并不经常使用此功能,因此请向支持页面报告任何问题或功能请求。 如果您喜欢此附加组件,请考虑 以鼓励我...
参加比赛的作品,开发周期一个月,使用了 Wafer2 框架,后台采用腾讯云提供的 Node.js SDK 接入对象存储 API ,前端核心代码实现了类似于图片编辑器的功能,支持图片和文字的移动、旋转、缩放、生成预览图以及编辑...
知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来。...
如果图片超过了窗口大小,那么等比例缩放。##依赖依赖于jQuery,用于元素创建、定位查找以及事件绑定。若能有其他实现此功能的插件,亦可。##调用接口ImgBrowser.attach(container,useCache,cache);参数解释:...
7.13 按比例调整图片的大小 7.14 滑动效果的背景图片 7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张...
图片按固定的宽高显示。宽高的值可设置,宽度不能大于略缩图的宽度。如果略缩图的高度大于设置的高度, 大于的部分将被隐藏,图片不会拉伸变形。小于的话就按略缩图的高度显示。 分页模式适合大部分的图片高度...
验证通过:vue3.0导入threejs三维模型,实现模型放大,缩小,拖动及其动画效果,鼠标点击规划空间路径。
创建配方后,用户可以按1/4的比例向上或向下缩放配料列表。 科技栈 React CSS3 HTML5 GraphQL 阿波罗客户 阿波罗链接 React路由器 笑话 与Vercel一起部署 程式库 组件 此文件夹包含该应用程序的所有组件。 每个...
图片按固定的宽高显示。宽高的值可设置,宽度不能大于略缩图的宽度。如果略缩图的高度大于设置的高度, 大于的部分将被隐藏,图片不会拉伸变形。小于的话就按略缩图的高度显示。 分页模式适合大部分的图片高度...
在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集,这种文章只需要左右滑动浏览,最好的体验是让图片缩放显示在屏幕有效范围内,防止图片太大导致用户需要滑动手指...
贴心PDF书签编辑器:可批量修改PDF书签属性(颜色、样式、目标页码、缩放比例等),在书签中执行查找替换(支持正则表达式及XPath匹配)。 生成PDF书签:无需手工输入,自动识别正文标题或目录,为PDF文档生成书签...