- 浏览: 57412 次
- 性别:
- 来自: 广州
文章分类
文章转自:http://hi.baidu.com/crystalhx/blog/item/deba9b2320274340ac34de09.html
图片自动缩放 js图片缩放
对于不指定大小的图片默认是以原大小显示,所以在不指定大小的图片上用onload事件触发脚本代码,在代码中判断图片的尺寸,如果超过指定值,将自动设置为允许的最大值。
具体步骤:
方法一:在图片加载完毕后用onload句柄触发执行脚本,重设图片的宽度为图片宽度和300两者的最小值。
代码示例: <img src="demo.gif" onload="if(this.width>300)this.width=300">
或者
<img src="demo.gif" onload="this.width=Math.min(this.width,300)">
方法二:按比例缩小。只需要把js加在head之间,再在body处加入onload="ResizeImages();"代码。
<script language="JavaScript">
<!--
function ResizeImages()
{
var myimg,oldwidth;
var maxwidth=180; //缩放系数
for(i=0;i <document.images.length;i++){
myimg = document.images[i];
if(myimg.width > maxwidth)
{
oldwidth = myimg.width;
myimg.width = maxwidth;
myimg.height = myimg.height * (maxwidth/oldwidth);
}
}
}
//-->
</script>
或
<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
//参数(图片,允许的宽度,允许的高度)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
</script>
调用:<img src="images/toplogo.gif" onload="javascript:DrawImage(this,100,100)">
图片自动缩放 js图片缩放
对于不指定大小的图片默认是以原大小显示,所以在不指定大小的图片上用onload事件触发脚本代码,在代码中判断图片的尺寸,如果超过指定值,将自动设置为允许的最大值。
具体步骤:
方法一:在图片加载完毕后用onload句柄触发执行脚本,重设图片的宽度为图片宽度和300两者的最小值。
代码示例: <img src="demo.gif" onload="if(this.width>300)this.width=300">
或者
<img src="demo.gif" onload="this.width=Math.min(this.width,300)">
方法二:按比例缩小。只需要把js加在head之间,再在body处加入onload="ResizeImages();"代码。
<script language="JavaScript">
<!--
function ResizeImages()
{
var myimg,oldwidth;
var maxwidth=180; //缩放系数
for(i=0;i <document.images.length;i++){
myimg = document.images[i];
if(myimg.width > maxwidth)
{
oldwidth = myimg.width;
myimg.width = maxwidth;
myimg.height = myimg.height * (maxwidth/oldwidth);
}
}
}
//-->
</script>
或
<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
//参数(图片,允许的宽度,允许的高度)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
</script>
调用:<img src="images/toplogo.gif" onload="javascript:DrawImage(this,100,100)">
发表评论
-
跨域iframe高度自适应 兼容IE/FF/OP/Chrome浏览器
2012-03-26 12:39 1166转自:http://www.5icool.org/ ... -
程序中调用jdbc访问oracle不可以有英文分号
2011-08-09 17:16 2000今天也遇到下文的问题,主要是多了个";"的 ... -
mvnform权限系统
2011-07-21 16:26 939mvnforum权限系统分析 mvnforum ... -
iphone safari 样式
2011-02-22 22:07 0转自:http://kinvix.kdv.cn/blog/?p ... -
文件格式及相关的response.contentType
2011-02-17 16:17 1175转自:http://blog.sina.com.cn/s/bl ... -
url最大长度问题
2011-01-27 10:15 1431转自:http://j2ees.iteye.com/blog/ ... -
JAVA 中URL链接中文参数乱码的若干处理方法
2011-01-25 18:43 1179转自:http://www.sudu.cn/info/html ... -
js中刷新页面总结
2010-09-16 13:31 1553转自:http://hi.baidu.com/kbsy/blo ... -
HTML 标签属性列表
2010-07-02 10:43 657标签属性 属性 描述 ALIGN alig ... -
Java核心API需要掌握的程度(转)
2010-04-17 17:15 629Java的核心API是非常庞的,这给开发者来说带来了很的方便, ... -
非阻塞I/0(转)
2010-04-17 17:10 1038文章转自:http://www.100ks ... -
GWT小结
2010-04-01 14:35 0GWT支持java.lang和java.util包的子集,还支 ... -
JDom小结
2010-04-01 14:23 0JDom包的结构: org.JDom ... -
java集合类的研究
2010-03-16 16:36 645HashSet的初始容量时16,其增长的基数时2,也就是说,当 ... -
Java:集合类性能分析【转】
2010-03-16 15:26 884这篇文章是转的,暂时没有验证文章中的正确性,我有时间会一一验证 ... -
HTTP错误请求代码一览[http,response,error code]
2010-03-10 11:40 3083static int SC_ACCEPTED ... -
ejb的entitybean中使用动态的sql
2010-03-05 15:06 764由于接触EJB的时间比较短,一直都十分好奇,如何使用容器来执行 ... -
LinkedList的Iterator的性能分析
2010-03-02 10:09 966LinkedList的Iterator 的性能颈瓶: 对于It ... -
RMI原理概要
2010-02-24 13:30 674其中远程对象要实现remote接口以及序列化接口。客户端值 ... -
java获取系统属性
2010-02-24 09:13 632java.version Java 运行时环境版本 jav ...
相关推荐
本文将详细介绍如何使用JavaScript实现图片自动缩放,并探讨相关技术点。 首先,图片自动缩放的核心目标是确保图片在不同的显示环境中都能以合适的比例展示,避免因图片过大或过小导致的视觉不适。JavaScript可以...
总的来说,JavaScript图片自动缩放技术结合DOM操作和事件监听,可以帮助开发者实现灵活的图片尺寸管理,提升网页的用户体验。在实际项目中,还可以结合CSS3的`object-fit`属性或者其他前端框架(如Bootstrap的响应式...
可以在任何block元素内自动加载图片,注意要为此元素设定...在元素上指定图片缩放的高和宽,data-img-size="200,200",再指定图片地址,data-img-url='201202290527DD55232D.jpg',js中调用imgAutoResizer方法即可。
通过媒体查询,可以针对不同设备设置不同的图片缩放策略。 5. **`<img>`标签的新属性**: - `srcset`:此属性允许浏览器根据设备的像素密度选择合适的图片资源。例如,可以提供多种分辨率的图片,浏览器会自动选择...
图片自动等比缩放JS(实用) 直接加载调用,不受IE、TT、火狐影响
网页图片的自动缩放是一个常见的需求,...总的来说,自动缩放图片是为了提高网页的用户体验和视觉效果。通过CSS或JavaScript,我们可以确保图片在不同设备和屏幕尺寸下都能正确展示,避免因图片过大导致的布局问题。
本文将深入探讨“可自动缩放的JS弹性相册代码”这一主题,帮助开发者理解如何利用JavaScript创建一个能根据浏览器窗口大小自适应调整的图片相册。 一、JavaScript基础 在构建任何JS特效之前,首先需要了解...
通过在`<img>`标签的`onload`事件中调用`AutoResizeImage`,并在传递参数中指定最大宽度和最大高度,我们可以确保图片在加载完成后自动按比例缩放。 ```html (100, 0, this)" /> ``` 在这个例子中,第一张图片限制...
这个脚本会自动找到页面上的所有图片元素,并在每个图片加载完成后调用 `scaleImage()` 函数,确保所有图片都按照比例缩放。 总结一下,通过JavaScript的 `scaleImage()` 函数,我们可以确保图片在任何情况下都能...
<script src="main/js/photoswipe.init.js"> (this)'/> ()'>多图预览</button> function photoPreview(items) { var items = [{ src: "1.jpg", w: 1920, h: 1080, title: "第一张图片的...
在这个“jquery自动缩放渐变全屏背景图片代码下载.zip”压缩包中,我们关注的是一个利用jQuery实现的特殊效果,即全屏背景图片的自动缩放和渐变效果。这个功能通常用于提升网站的视觉吸引力,尤其是在设计现代、简洁...
等比例缩放的基本思想是在缩放图片时保持其宽度和高度的比例不变。这意味着如果我们将图片的高度减小了一定的比例,那么宽度也需要按照相同的比例减小,反之亦然。这样做的目的是避免图片出现拉伸或压缩的情况,从而...
综上所述,实现“上传图片缩放裁剪(js)简单易用”涉及前端的图片选取、预览、缩放、裁剪,以及后端的图片接收和处理。这些技术在现代Web应用中广泛使用,提供了丰富的用户体验,同时也需要开发者具备良好的前后端...
2. **图片缩放**:除了基本的轮播功能,该插件还支持图片的缩放操作。用户可以通过双指捏合或分开的动作来放大或缩小图片,查看细节。这种功能对于展示高分辨率图像或者需要用户仔细查看的内容尤其有用。同时,为了...
总之,这个jQuery图片比例缩放插件通过JavaScript实现了图片的动态调整,保证了图片在不同尺寸的屏幕上都能保持合适的比例,提升了网页的视觉效果和用户体验。了解并掌握这类插件的使用方法,对于前端开发者来说是...
在网页开发中,JavaScript(简称JS)是一种广泛使用的客户端脚本语言,用于增强用户的交互体验。本文将深入探讨如何利用JavaScript技术实现HTML页面上的图片拖动与缩放功能。 首先,我们要了解HTML中的图片元素`...
"js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位,使得图片无论在何种分辨率或屏幕尺寸下都能保持良好的视觉效果。这里我们将详细探讨这一技术实现的原理...
在IT领域,图片轮播和图片缩放是两种常见的网页和应用程序中的图像处理技术。它们在网站设计、移动应用和多媒体展示中起着至关重要的作用,为用户提供动态且交互式的视觉体验。 首先,我们来详细了解一下图片轮播。...
#### - 图片缩放 jq-viewer支持鼠标滚轮缩放和双指捏合缩放。通过设置`zoomRatio`参数可以控制每次缩放的比例。 #### - 图片拖动 用户可以通过鼠标或手指在图片上拖动来改变视图位置。默认情况下,当图片超过容器...
总的来说,`JQuery`实现的等比缩放图片插件通过简洁的代码实现了动态、自动的图片缩放功能,提高了网页的用户体验。开发者可以根据自己的项目需求,灵活地运用和定制这样的插件,以满足各种复杂的布局需求。