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

img 等比缩放

 
阅读更多
js图片等比缩放
function DrawImage(ImgD,FitWidth,FitHeight){
     var image=new Image();
     image.src=ImgD.src;
     if(image.width>0 && image.height>0){
         if(image.width/image.height>= FitWidth/FitHeight){
             if(image.width>FitWidth){
                 ImgD.width=FitWidth;
                 ImgD.height=(image.height*FitWidth)/image.width;
             }else{
                 ImgD.width=image.width; 
                ImgD.height=image.height;
             }
         } else{
             if(image.height>FitHeight){
                 ImgD.height=FitHeight;
                 ImgD.width=(image.width*FitHeight)/image.height;
             }else{
                 ImgD.width=image.width; 
                ImgD.height=image.height;
             } 
        }
     }
 }


<img src="XXXX" alt="自动缩放后的效果"  onload="javascript:DrawImage(this,"200","200");" />

网上很多等比缩放都用用这样的方式。
其实只要固定img width 和heihgt 中的一个属性就可以了。
<img src="aa.jpg" onload="javascript:if(this.width>500)this.width=500;" />
分享到:
评论

相关推荐

    JQuery实现等比缩放图片插件

    本文将详细介绍如何使用JQuery实现等比缩放图片的插件,并结合提供的`autoImg`文件进行解析。 首先,我们要理解等比缩放的基本原理。等比缩放是指保持图片的长宽比不变,根据指定的容器大小来调整图片的尺寸。在CSS...

    JS图片等比缩放

    "JS图片等比缩放"是一种常见的技术,用于确保图片在不同尺寸的容器中显示时保持其原始比例,避免图像失真或变形。这种技术广泛应用于产品图和缩略图的显示,尤其是在用户需要查看多种尺寸图片的场景下,如电商网站的...

    图片等比缩放展示

    在IT行业中,图片等比缩放展示是一项基本且重要的技术,尤其在网页设计和移动应用开发中至关重要。等比缩放确保了图片在不同尺寸的屏幕或窗口中保持其原始的比例,避免出现图像拉伸或压缩导致失真的情况。本话题主要...

    js等比缩放图片

    有时候,我们希望图片能够在不同的设备和屏幕尺寸下保持良好的显示比例,这就需要用到等比缩放技术。本文将深入探讨如何使用JavaScript实现图片的等比缩放,确保在火狐、IE、谷歌等主流浏览器中都能正常工作。 首先...

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

    在JavaScript中,对图片进行等比缩放和旋转是常见的图像处理需求,尤其在Web开发中,例如在响应式设计、交互式用户界面或者在线图片编辑应用中。本篇文章将详细探讨如何使用JavaScript来实现这些功能。 首先,我们...

    go语言图片等比缩放图片居中固定大小无拉伸

    等比缩放图片并保持其原始比例,同时确保图片居中且不发生拉伸,是图像处理中的一个重要环节。这有助于保持图片的质量和视觉效果。下面将详细介绍如何在Go语言中实现这一功能。 首先,我们需要导入`image`和`image/...

    JQUERY相册--等比缩放图片大小

    在网页设计中,展示图片的方式多种多样,而“JQUERY相册--等比缩放图片大小”就是一个典型的案例,它利用jQuery库实现了一个功能强大的图片相册,具有自动等比例缩放图片的功能,确保无论原始图片尺寸如何,都能在...

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

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

    图片等比缩放

    jquery图片根据自定义横宽像素,对任何图片进行等比缩放,更换img的src图片测试即可。

    php和js对数据库图片进行等比缩放示例

    在PHP方面,通过使用PHP类`ImgSF`中的`make_img`函数来完成图片的等比缩放工作。由于PHP操作的是服务器端资源,函数内部通过拷贝原始图片来创建新资源,并使用GD库中的函数进行缩放处理。这一过程需要对原始图片进行...

    PHP的一个完美GIF等比缩放类,附带去除缩放黑背景

    在这个场景中,我们看到一个名为`resize_image`的类,该类专门用于处理GIF图像的等比缩放并去除缩放后的黑色背景。 首先,让我们深入了解`resize_image`类的结构和工作原理。类中定义了几个私有属性,如原始图像的...

    js实现图片的按比例缩放

    为了解决这个问题,我们可以使用JavaScript来实现图片的按比例缩放,确保图片始终保持其原始比例,避免变形。下面将详细介绍如何使用JavaScript来实现这一功能,并结合提供的文件进行解析。 首先,我们需要理解图片...

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

    1. **选择元素**:使用jQuery的选择器选取需要处理的图片元素,例如`$("img")`会选取所有的图片元素。 2. **计算比例**:获取图片的原始宽度和高度,然后根据目标容器的尺寸计算出缩放比例。这可以通过`width()`和`...

    JQuery 图片延迟加载并等比缩放插件

    最近在学习JS的OOP所以写了这么个东西 使用方法: $(“.viewArea img”).zoom({height:74,width:103}); 效果演示: http://demo.jb51.net/html/jquery_img/jquery_img.htm代码: 代码如下: (function($){ $.fn.zoom ...

    php实现按指定大小等比缩放生成上传图片缩略图的方法

    等比缩放是一种常用的技术,它可以在保证图片比例不变的前提下,对图片的宽度或高度进行缩放。这种技术尤其适用于对图片进行快速预览而不牺牲图片质量的场景。 本篇内容将详细介绍如何使用PHP语言,根据指定的宽度...

    JS图片等比例缩放

    图片等比例缩放 (作者:back_crying) 1、先创建一个隐藏的img对象来获取图片的实际尺寸 2、根据限制的大小反复判断,图片能够显示的最大尺寸 3、设置图片尺寸和周围的占位,避免页面变形 4、删除隐藏的img对象 (注:...

    jquery图片比例缩放插件

    1. **选择器**:定义选择要进行缩放操作的图片元素,如`$('img.resizable')`。 2. **计算比例**:根据图片原始尺寸和容器尺寸计算缩放比例,如`var ratio = containerWidth / imgWidth;`。 3. **设置样式**:使用CSS...

    纯CSS无表达式实现未知尺寸图片等比缩放(支持IE7及以上)

    在网页设计中,确保图片等比缩放且不超出设定的容器尺寸是非常常见的需求。这里我们探讨的是如何使用纯CSS来实现这一目标,特别是在不支持CSS表达式(IE6不支持)的情况下,仍然能兼容IE7及以上的浏览器。 首先,...

    js+CSS 图片等比缩小并垂直居中实现代码.docx

    在 JS 中,我们需要使用 JavaScript 来实现图片的等比缩放。我们首先需要获取所有的 `&lt;img&gt;` 元素,并遍历它们。如果图片的宽度或高度超过限制宽度或高度,就需要将其缩放到等比的大小。同时,我们还需要将图片垂直...

Global site tag (gtag.js) - Google Analytics