`
cesar2008
  • 浏览: 41478 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

两个JS实现自动按比例缩放图片

阅读更多

两个,JS实现自动按比例缩放图片,但一小BUG 要是图片在下载中,还是会和原先一样大,下载完后才会执行.如果网速慢的话,就会把页面撑地很大.

1、
<script language="JavaScript">
 var flag=false;
 function DrawImage(ImgD){
 var image=new Image();
 image.src=ImgD.src;
 if(image.width>0 && image.height>0){
  flag=true;
  if(image.width/image.height>= 450/338){
   if(image.width>450){
    ImgD.width=450;
    ImgD.height=(image.height*450)/image.width;
   }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
   }
    ImgD.alt=image.width+"×"+image.height;
   }
   else{
    if(image.height>338){
     ImgD.height=338;
     ImgD.width=(image.width*338)/image.height;
    }else{
     ImgD.width=image.width;
     ImgD.height=image.height;
    }
   ImgD.alt=image.width+"×"+image.height;
   }
  }
 }
</script>

 〈IMG src="<%= url %>" onload="javascript:DrawImage(this);"〉

<script language="javascript">
function DImage(ImgD){
    var image=new Image();
  //  alert(ImgD.src);
    image.src= ImgD.src;
    if(image.width>0 && image.height>0){
        //flag=true;
        if(image.height>=100){
            ImgD.height=100;
            ImgD.width=(image.width*100)/image.height;
        }else{
            ImgD.width=image.width;
            ImgD.height=image.height;
        } 
    }
}

</script>

     〈img border="0" src="<%=info.getReserve2() %>" onload="javascript:DrawImage(this);"〉

分享到:
评论

相关推荐

    js按比例缩放图片且垂直居中显示图片

    "js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位,使得图片无论在何种分辨率或屏幕尺寸下都能保持良好的视觉效果。这里我们将详细探讨这一技术实现的原理...

    js图片自动缩放功能

    - 按宽度缩放:保持图片的宽度与容器宽度相同,高度按比例缩放。 - 按高度缩放:保持图片的高度与容器高度相同,宽度按比例缩放。 选择哪种方式取决于设计需求,通常为了保持图片的原始比例,我们会优先考虑按...

    js代码按比例图片缩放

    本文将详细介绍如何使用JavaScript来实现图片的自动按比例缩放功能。 #### 二、核心代码解析 ```javascript function autoResizeImage(maxWidth, maxHeight, objImg) { var img = new Image(); img.src = objImg....

    JS实现控制图片显示大小的方法【图片等比例缩放功能】

    关于使用JavaScript实现图片等比例缩放功能,这是前端开发中常遇到的需求。图片等比例缩放是指在调整图片大小时,保持图片的宽高比不变,避免图片因缩放导致的变形。这种技术尤其在响应式网页设计中非常有用,可以...

    JS实现按比例缩放图片的方法(附C#版代码)

    在网页开发中,有时我们需要对图片进行按比例缩放,以适应不同的屏幕尺寸或保持页面布局的美观。本文将详细讲解如何使用JavaScript实现这一功能,并提供一个C#版本的代码作为参考。 首先,我们来看JavaScript的实现...

    JavaScript等比例缩放图片控制超出范围的图片

    本文将详细解析如何使用 JavaScript 实现等比例缩放图片,以控制其超出预设范围。 首先,我们来看一段实现这一功能的 JavaScript 代码: ```html 等比例缩放图片 function DrawImage(ImgD, iwidth, iheight)...

    99%CSS3+1%JS实现缩放图片展示特效.rar

    在"99%CSS3+1%JS实现缩放图片展示特效"的项目中,开发者很可能是利用了上述技术的组合,创造出一种平滑且引人注目的图片展示方式。通过阅读同名博客,你可以更深入地了解每个步骤和具体实现细节,从而学习并应用到...

    Pinchzoom.js插件实现手指触摸图片放大缩小

    Pinchzoom.js通过监听这些手势,计算两个手指间的距离变化,进而调整图片的CSS transform属性,实现图片的平滑缩放。 在使用Pinchzoom.js之前,你需要在HTML文件中引入这个插件。通常,你可以将Pinchzoom.js的源...

    按比例缩放图片

    以下是一个简单的JS函数示例,用于按比例缩放图片: ```javascript function scaleImage(imageElement, maxWidth, maxHeight) { var img = imageElement; var width = img.width; var height = img.height; if...

    JS编写的基于网页的图片浏览器

    这个JS类库实现了自动按比例缩放图片的功能,确保无论图片的原始尺寸如何,都能适应预设的显示区域。这通常是通过计算图片的宽高比,并根据容器的尺寸调整图片大小来实现的。这样,无论用户的屏幕分辨率如何,图片都...

    图片轮播、图片缩放

    另外,JavaScript也可以通过改变图片元素的width和height属性来实现等比例或非等比例的缩放。对于响应式设计,CSS3的媒体查询可以确保图片在不同设备和屏幕尺寸下按需缩放。 在实际应用中,图片轮播和图片缩放往往...

    js操作图片等比缩放及旋转

    - **JavaScript**:动态调整大小时,我们需要获取图片的原始尺寸和目标尺寸,然后根据这两个尺寸计算缩放比例。例如,可以使用`naturalWidth`和`naturalHeight`属性获取原始尺寸,然后计算新的宽度和高度。 ```...

    jquery实现图片等比例缩放以及max-width在ie中不兼容解决

    &lt;title&gt;jQuery等比例缩放图片 body { margin: 0; padding: 0; } .box { width: 700px; margin: 0 auto; } .imgBox { background: #CCCCCC; /* 针对IE6的hack */ *display: table-cell; width: 400px...

    缩放图片实例

    例如,在Python中,可以使用PIL库的`resize()`函数按比例缩放图片: ```python from PIL import Image # 打开图片 img = Image.open('input.jpg') # 定义新的尺寸,以保持宽高比 new_size = (width * scale, ...

    JavaScript实现加载不同尺寸图片自适应统一尺寸容器,且图片不变形

    例如,容器可以设定固定宽度和高度,图片设置为`max-width: 100%`和`height: auto`,这将使图片按比例缩放,保持原始宽高比。 ```html .container { width: 300px; height: 200px; overflow: hidden; /* ...

    图片的缩放

    有两种主要的缩放方法:按比例缩放(保持原始宽高比)和非比例缩放(可能会改变原始宽高比)。JavaScript可以通过操作DOM元素的样式属性,如`width`和`height`来实现图片的缩放。 在JavaScript中,我们可以获取到...

    图片轮播中自动缩放图片插件 for PHPwind7.5 GBK utf8.rar

    这个名为“图片轮播中自动缩放图片”的插件,专门针对PHPwind7.5设计,旨在解决图片在轮播展示时可能出现的显示变形问题。 1. **插件功能解析:** - **自动缩放**:该插件的核心功能是根据轮播区域的尺寸动态调整...

    指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)

    如果比例大于1或图片原始宽度大于600,就按比例缩放图片,并根据浏览器类型添加点击事件,使得图片在新窗口中打开。对于IE浏览器,它使用`outerHTML`属性替换图片元素为包含链接的图片元素;对于非IE浏览器,它通过...

    兼容各浏览器的js图片旋转缩放特效

    本文将深入探讨如何使用JavaScript实现一个兼容各浏览器的图片旋转和缩放特效,以及涉及到的相关技术点。 首先,让我们了解JavaScript在图片处理中的作用。JavaScript是一种客户端脚本语言,它可以直接在用户的...

Global site tag (gtag.js) - Google Analytics