javascript 实现对图片不失真的缩放

最新推荐文章于 2019-04-29 17:02:22 发布

chen106106

最新推荐文章于 2019-04-29 17:02:22 发布

阅读量4.6k

点赞数

分类专栏： javascript学习笔记文章标签： javascript 图片缩放不失真 ViewUI

本文链接：https://blog.csdn.net/chen106106/article/details/84227980

版权

这篇博客展示了如何使用JavaScript实现图片的不失真缩放。通过提供的代码，可以按比例自动调整图片尺寸，无论限制宽度、高度或者同时限制，都能保持原始比例，避免图片变形。文中给出了多个示例，包括不同压缩参数下的图片展示效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>最新javascript自动按比例显示图片，按比例压缩图片显示</title>
<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
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 i