JS控制圖片顯示的大小(圖片等比例縮放)
<!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=utf-8" />
<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 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;
}
</script>
</head>
<body>
<br />
原圖顯示(534 X 800)<br />
onload="AutoResizeImage(0,0,this)<br />
<a href="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="534 X 800"/></a><br/><br />
1.按寬度250壓縮,不限制高度 按比例壓縮<br />
onload="AutoResizeImage(250,0,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)" alt="250 X 374"/></a><br /><br />
2.按高度250壓縮,不限制寬度 按比例壓縮<br />
onload="AutoResizeImage(0,250,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)" alt="166 X 250"/></a><br /><br />
3.按高度250寬度250 按比例壓縮<br />
onload="AutoResizeImage(250,250,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)" alt="200 X 300"/></a><br /><br />
4.高寬不等比例壓縮 (400 X 512),此時高度不變,會自動按高度的比例壓縮。<br />
onload="AutoResizeImage(400,512,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)" alt="341 X 512"/></a><br /><br />
5.高寬不等比例壓縮 (300 X 600),此時寬度不變,會自動按寬度的比例壓縮。<br />
onload="AutoResizeImage(300,600,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)" alt="300 X 449"/></a><br /><br />
6.如果圖片本來的高度和寬度小於壓縮的最大高度和寬度,則不會拉大顯示圖片(按原圖顯示)<br />
原圖444 x 207,壓縮為 500 x 600,將保持原圖顯示<br />
onload="AutoResizeImage(500,600,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/242776/o_20070410_b7409cd284a0f799a357uePcEFa6ty0X.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)" alt="444 X 207"/></a><br /><br />
</body>
</html>
轉自:http://zxianf.blog.163.com/blog/static/30120701201102123637150/
我的主頁:[url=www.naxsu.com]www.naxsu.com[/url]
相關文章
- js控制圖片等比例縮放程式碼JS
- 等比例縮放圖片 jsJS
- JS實現等比例縮放圖片JS
- 圖片等比例縮放程式碼
- 圖片等比例縮放裁切詳解
- JavaScript圖片簡單等比例縮放JavaScript
- 利用javascript實現圖片等比例縮放JavaScript
- QLabel顯示圖片 ,並實現縮放
- 移動端圖片等比例縮放實踐
- VS+Qt+Halcon——顯示圖片,實現滑鼠縮放、移動圖片QT
- GridView中控制圖片的顯示大小的例項View
- 純JS實現圖片預覽與等比例縮放和居中JS
- js 滾輪控制圖片縮放大小和拖動JS
- ASP.NET C# 按原圖片大小等比例縮放生成縮圖ASP.NETC#
- css3背景圖片等比例縮放鋪滿全屏CSSS3
- 按比例縮放圖片大小程式碼例項
- js圖片等比例放大縮小例項程式碼JS
- Android 圖片縮放Android
- 實現圖片縮放
- UIImage 圖片處理:截圖,縮放,設定大小,儲存UI
- css實現圖片按寬等比例縮放不變形CSS
- 圖片操作系列 —(1)手勢縮放圖片功能
- SwiftUI圖片處理(縮放、拼圖)SwiftUI
- html 圖片按比例縮放HTML
- JS中通過指定大小來壓縮圖片JS
- iOS根據圖片比例計算顯示大小iOS
- img圖片無法顯示利用onerror事件顯示替代圖片Error事件
- AlamofireImage 使用 – swift載入網路圖片,縮放圖片,生成圓形圖片Swift
- Node.js 對圖片進行裁切、縮放Node.js
- HTML5 圖片縮放功能HTML
- Android:ImageView圖片縮放、居中AndroidView
- web前端頁面點選預覽圖片及大小縮放Web前端
- opencv圖片上如何顯示兩個小圖片OpenCV
- 動態等比例調整圖片大小的jQuery程式碼jQuery
- Windows10系統桌面圖片怎麼顯示為縮圖Windows
- CSS實現圖片等比例縮小不變形CSS
- js上傳圖片壓縮JS
- js圖片壓縮推薦JS