`
pumaboyd
  • 浏览: 246253 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

用Javascript将图片等比例缩放

阅读更多

并非原创,主要是产品部的需求。对网站商户图片进行等比例缩放。

script:
function resizeimg(ImgD,iwidth,iheight) {
     var image=new Image();
     image.src=ImgD.src;
     if(image.width>0 && image.height>0){
        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;
            }
ImgD.style.cursor= "pointer"; //改变鼠标指针
ImgD.onclick = function() { window.open(this.src);} //点击打开大图片
if (navigator.userAgent.toLowerCase().indexOf("ie") > -1) { //判断浏览器,如果是IE
ImgD.title = "请使用鼠标滚轮缩放图片,点击图片可在新窗口打开";
ImgD.onmousewheel = function img_zoom() //滚轮缩放
 {
var zoom = parseInt(this.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if (zoom> 0) this.style.zoom = zoom + "%";
return false;
 }
  } else { //如果不是IE
     ImgD.title = "点击图片可在新窗口打开";
   }
    }
}
HTML:
<img id="imgDoc" border="0" src="test.jpg" onload="javascript:resizeimg(this,400,300);" >

 

引用:http://www.rev9.cn/article.asp?id=82

Google 标记: Javascript, 等比例缩放
分享到:
评论

相关推荐

    JavaScript实现网页图片等比例缩放 图片等比例缩放

    ### JavaScript 实现网页图片等比例缩放 在网页设计与开发过程中,经常遇到的一个问题是确保图片能在不同设备、不同分辨率的屏幕上保持良好的显示效果。图片的等比例缩放是其中一种解决方案,它能够保证图片在缩放...

    js实现图片等比例缩放

    本文将深入探讨如何使用JavaScript实现图片的等比例缩放,并将其居中显示。 首先,我们需要理解等比例缩放的基本原理。等比例缩放意味着图像的宽度和高度按相同的比例进行缩放,以保持其原有的形状。公式是:新尺寸...

    图片等比例缩放代码,图片等比例缩放JS代码,图片缩放代码

    本篇将详细讲解如何使用JavaScript实现图片等比例缩放,以及相关的编程知识。 一、图片等比例缩放原理 等比例缩放的核心思想是保持图像的宽高比不变,避免因缩放导致图像变形。在计算新的宽度或高度时,通常会基于...

    JS图片等比例缩放方法完整示例

    本篇将详细介绍如何使用JavaScript实现图片的等比例缩放,并通过一个完整的示例来解析其工作原理。 首先,我们需要理解等比例缩放的基本概念。等比例缩放是指在调整图片大小时,保持其宽高比不变,避免图像变形。在...

    jquery图片等比例缩放

    本文将深入探讨如何利用jQuery实现图片的等比例缩放。 ### 等比例缩放的原理 等比例缩放的核心在于保持图片的宽高比,即宽度与高度的比例不变。在CSS中,我们通常设置`max-width: 100%`和`max-height: 100%`来限制...

    图片等比例缩放个人最优化版(IE6,IE7,FF)

    本文将深入探讨如何实现图片等比例缩放,并结合实例分享一个针对IE6、IE7以及Firefox浏览器的个人最优化版本。 等比例缩放的基本原理是保持图片的纵横比不变,即在调整图片宽度或高度时,另一个维度也会相应按比例...

    图片等比例缩放,网页图片处理方法

    本文将详细介绍如何利用JavaScript(简称JS)以及jQuery这两种常用前端技术实现图片的等比例缩放。 #### 一、基础知识简介 **1.1 图片等比例缩放的概念** 等比例缩放是指在调整图片大小时保持其原始宽高比不变的...

    图片按比例缩放

    在本篇文章中,我们将深入探讨如何进行图片按比例缩放,以及这一过程中的相关知识点。 首先,我们来理解什么是“按比例缩放”。比例缩放是指保持图片的长宽比,即纵横比不变,只改变其尺寸大小。如果不按比例缩放,...

    图片等比例缩放,动态加载

    图片等比例缩放和动态加载是两种常见的优化技术,它们可以提高页面加载速度,节省用户流量,同时保持图片的视觉一致性。以下将详细介绍这两种技术及其实现方法。 一、图片等比例缩放 等比例缩放是指在不改变图片宽...

    javascript实现图片按比例缩放

    javascript实现图片按比例缩放

    图片等比例缩放.txt 图片等比例缩放.txt

    本篇文章将从一个具体的JavaScript代码示例出发,详细解析图片等比例缩放的技术实现细节。 #### 二、核心代码分析 首先,我们来看一下这段提供的JavaScript代码片段,它实现了图片等比例缩放的功能。 ```...

    jquery图片插件设置图片等比例缩放

    "jQuery图片插件设置图片等比例缩放"是一个实用的功能,能够确保图片在不同尺寸的屏幕上保持其原始比例,从而避免图片变形,提供良好的视觉效果。jQuery作为一款强大的JavaScript库,提供了丰富的功能来处理DOM操作...

    js图片缩放效果制作鼠标滚动图片等比例缩放

    在网页设计中,动态的图片展示效果可以提升用户体验,其中一种常见的技术是通过JavaScript实现鼠标滚动时图片等比例缩放。这个技术的核心在于利用JavaScript事件监听和CSS3变换功能,来实现图片随着页面滚动而优雅地...

    等比例缩放图片

    例如,可以使用CSS的`background-size`属性配合`cover`或`contain`值来实现背景图片的等比例缩放。 总的来说,通过jQuery实现等比例缩放图片是一项实用的技术,可以确保在不同屏幕尺寸下保持良好的视觉效果。结合...

    jquery图片插件设置图片等比例缩放.rar

    jquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置...

    按比例缩放图片,JavaScript代码.rar

    按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码...

    图像等比例缩放 等比例缩放图片

    2. **性能优化**:对于大量图像的等比例缩放处理,需要考虑性能优化措施,比如使用Web Workers来异步处理图像数据。 3. **用户体验**:在设计过程中,还需考虑到用户对于不同场景下的图像显示需求,提供灵活的自定义...

    jquery图片等比例缩放图片左右垂直居中

    在前端开发领域,图片的等比例缩放与居中显示是一项常见的需求,尤其在构建响应式网站或处理不同尺寸图片的展示时。"jQuery图片等比例缩放图片左右垂直居中"这一技术就是为了应对这样的挑战。jQuery是一个广泛使用的...

    js图片等比例缩放

    在探讨“js图片等比例缩放”的主题时,我们深入解析了如何利用JavaScript来实现图片的等比例缩放,这是一个在网络开发中极为实用且常见的需求。等比例缩放的目的是为了适应不同尺寸的屏幕或布局需求,同时保持图片...

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

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

Global site tag (gtag.js) - Google Analytics