利用javascript實現圖片等比例縮放
下面方法可以實現等比例縮放:
1. 把Image的Width和Height屬性刪除。
2. 把下面js程式碼複製在Image[color=red]後面[/color](注意:這裡假設你的Image名稱叫“Image1”如果不同請把它改過來,圖片按等比例縮放成200×200)。
整個網頁的原始碼如下:
1. 把Image的Width和Height屬性刪除。
2. 把下面js程式碼複製在Image[color=red]後面[/color](注意:這裡假設你的Image名稱叫“Image1”如果不同請把它改過來,圖片按等比例縮放成200×200)。
<script language="javascript" type="text/javascript">
function DrawImage()
{
var FitWidth = 200,FitHeight = 200;
var ImgD = document.getElementById('Image1');
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;
}
}
}
}
DrawImage();
</script>
整個網頁的原始碼如下:
<!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=gb2312" />
<title>圖片等比例綻放</title>
</head>
<body>
<img src="Spring.jpg" id="Image1"/>
</body>
</html>
<script language="javascript" type="text/javascript">
function DrawImage()
{
var FitWidth = 200,FitHeight = 200;
var ImgD = document.getElementById('Image1');
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;
}
}
}
}
DrawImage();
</script>
相關文章
- JS實現等比例縮放圖片JS
- JavaScript圖片簡單等比例縮放JavaScript
- 等比例縮放圖片 jsJS
- 圖片等比例縮放程式碼
- 移動端圖片等比例縮放實踐
- css實現圖片按寬等比例縮放不變形CSS
- 圖片等比例縮放裁切詳解
- 實現圖片縮放
- 純JS實現圖片預覽與等比例縮放和居中JS
- js控制圖片等比例縮放程式碼JS
- JS控制圖片顯示的大小(圖片等比例縮放)JS
- CSS實現圖片等比例縮小不變形CSS
- 利用 canvas 實現圖片壓縮Canvas
- css3背景圖片等比例縮放鋪滿全屏CSSS3
- css3 實現圖片等比例放大與縮小CSSS3
- JavaScript DOM元素長寬等比例縮放JavaScript
- 滑鼠懸浮圖片實現縮放效果
- QLabel顯示圖片 ,並實現縮放
- canvas實現的圖片縮放程式碼例項Canvas
- 在Delphi中實現圖片的旋轉、縮放 (轉)
- Android 圖片縮放Android
- VS+Qt+Halcon——顯示圖片,實現滑鼠縮放、移動圖片QT
- 純CSS無表示式實現圖片等比縮放(轉載)CSS
- html 圖片按比例縮放HTML
- ASP.NET C# 按原圖片大小等比例縮放生成縮圖ASP.NETC#
- css img 等比例自動縮放CSS
- JNI實現圖片壓縮
- 利用CSS、JavaScript及Ajax實現圖片預載入CSSJavaScript
- js圖片等比例放大縮小例項程式碼JS
- flutter實現可縮放可拖拽雙擊放大的圖片功能Flutter
- .NetCore實現圖片縮放與裁剪 - 基於ImageSharpNetCore
- Android 中實現圖片平移、縮放、旋轉同步進行Android
- Js實現任意位置縮放圖片,深入理解背後原理JS
- HarmonyOS NEXT應用開發之圖片縮放效果實現
- SwiftUI圖片處理(縮放、拼圖)SwiftUI
- 圖片操作系列 —(1)手勢縮放圖片功能
- HTML5 圖片縮放功能HTML
- Android:ImageView圖片縮放、居中AndroidView