function loadimg(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
<img onload="loadimg(800,500,this)" id="target" src="" />
分享到:
相关推荐
"js按比例缩放图片,不变形,不失真"是一个常见的需求,特别是在用户上传图片或者在页面中显示不同尺寸的图片时。传统的做法是直接设定图片的高度或宽度,但这往往会导致图片比例失衡,产生变形和失真的现象。本篇...
"js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位,使得图片无论在何种分辨率或屏幕尺寸下都能保持良好的视觉效果。这里我们将详细探讨这一技术实现的原理...
在网页设计中,图片的等比例缩放是一个常见的需求,特别是在响应式布局中,为了保持图像的原始比例,避免拉伸或压缩导致变形,我们通常会利用JavaScript来动态调整图片大小。本文将深入探讨如何使用JavaScript实现...
为了解决这个问题,我们可以使用JavaScript来实现图片的按比例缩放,确保图片始终保持其原始比例,避免变形。下面将详细介绍如何使用JavaScript来实现这一功能,并结合提供的文件进行解析。 首先,我们需要理解图片...
总结来说,JavaScript的图片等比例缩放技术是通过计算图片原始尺寸与目标尺寸之间的比例,然后调整图片元素的宽度和高度来实现的。这不仅可以保持图片的原始比例,还能确保在不同屏幕尺寸下图片的视觉效果。在实际...
"图片按比例缩放"就是其中一个核心操作,它涉及到图像处理的基本原理和技术。在本篇文章中,我们将深入探讨如何进行图片按比例缩放,以及这一过程中的相关知识点。 首先,我们来理解什么是“按比例缩放”。比例缩放...
使用一个方法可以等比例缩小你的,让图片不失去原本的效果。
按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码...
在网页设计中,动态的图片展示效果可以提升用户体验,其中一种常见的技术是通过JavaScript实现鼠标滚动时图片等比例缩放。这个技术的核心在于利用JavaScript事件监听和CSS3变换功能,来实现图片随着页面滚动而优雅地...
在JavaScript中,图片按比例缩小是一项常见的操作,特别是在网页开发或者图像处理的场景下。这个话题涉及到HTML5的Canvas API、CSS3的transform属性以及Image对象的使用。下面将详细介绍这些知识点。 首先,Canvas ...
js实现的图片等比例缩放,js实现的图片等比例缩放
在JavaScript(JS)中,对图片进行各种比例的缩放是一项常见的需求,特别是在网页开发或者图像处理应用中。本文将详细讲解如何使用JavaScript实现图片的动态缩放,并探讨不同的缩放方法及其优缺点。 首先,我们需要...
"asp按比例缩小图片"这个标题所指的就是使用ASP编程语言来实现图片的等比例缩放,以确保图片在尺寸减小后保持原有的纵横比,避免失真。以下是对这个知识点的详细讲解: 1. 图片上传: ASP可以通过HTTP请求获取用户...
图片缩小时,按照原始图片的比例缩小,不至于缩小导致图片变形! function imgage(ImgD){ var image=new Image(); var iwidth = 400; //定义允许图片宽度 var iheight =450; //定义允许图片高度 image.src=ImgD.src;...
等比例缩放的基本思想是在缩放图片时保持其宽度和高度的比例不变。这意味着如果我们将图片的高度减小了一定的比例,那么宽度也需要按照相同的比例减小,反之亦然。这样做的目的是避免图片出现拉伸或压缩的情况,从而...
在网页设计和开发中,图片的处理是一项非常重要的工作,特别是在响应式布局中,确保图片能够根据屏幕尺寸等比例缩放是必要的。...以上就是关于图片等比例缩放JS代码的详细解释,希望对您有所帮助。
本文将详细介绍如何利用JavaScript(简称JS)以及jQuery这两种常用前端技术实现图片的等比例缩放。 #### 一、基础知识简介 **1.1 图片等比例缩放的概念** 等比例缩放是指在调整图片大小时保持其原始宽高比不变的...
图片按比例缩放 js图片按比例缩放大小,无需CSS样式
2. **图片按比例显示** - **CSS属性**:首先,确保图片的`display`属性为`block`,并设置`max-width`和`max-height`为`100%`,这样图片就会按照其原始宽高比自动调整大小,不超过容器的边界。 ```css img { ...