根据比例缩放图片的尺寸不变形代码实例
本章节介绍一下如何根据比例实现图片的不变形缩放效果。
下面是一段带代码实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/wp-content/uploads/front-end-tutorial/head><body><div><img id="one" src="img.jpg"></div>
<div><img id="two" src="img.jpg"></div>
</body>
</html>上面的代码展示了图片等比例缩放效果，第一个是原图，第二个是缩放后的图片，下面介绍一下实现过程。
一.代码注释:
（1）.function imageResize(thisobj, limitW, limitH) {}，实现了缩放效果，第一个参数img对象，第二个是宽度，第三个是高度。
（2）.var newW，声明一个变量用来存储新的宽度。
（3）.var newH，声明一个变量用来存储新的高度。
（4）.if (thisobj.width > limitW) {
newW = limitW;
newH = parseInt(thisobj.height * newW / thisobj.width);
// 按宽度比例缩放
if (newH > limitH){
newH = limitH;
newW = parseInt(thisobj.width * newH / thisobj.height);
}
thisobj.width = newW;
thisobj.height = newH;
}，这个基本是一个数学问题了，通过它就可以获取图片应该的尺寸。
（1）.parseInt()方法可以参阅javascript parseInt()一章节。
（2）.window.onload可以参阅window.onload用法详解一章节。
相关推荐
-
javascript实现的图片简单切换代码实例
图片切换功能很多都比较绚丽，当然有时候仅仅需要简单的每隔指定时间更换一下图片，下面就是一个这样的代码。代码如下: u
-
jQuery动态设置div元素的高度和宽度
本章节介绍一下最为基础的jqury应用，动态设置div的宽度和高度。代码实例如下：m
-
jquery实现的图片预加载简单介绍
图片预加载是一种提高网站性能的不错方式。所谓的图片预加载就是在还不使用图片的时候，实现将图片图片下载缓存起来，这当然能够在后续的使用中提高访问的速度，下面就是一个代码片段，能够实现此功能，代码如下:j
-
jquery实现的具有渐变效果的图片切换
本章节分享一段代码实例，实现了图片的切换效果，这里不管是背景图片还是其他什么样的切换效果。总之具有渐变效果的切换更为柔和，当然用户使用起来也更加人性化，下面就是一段具有此特性的代码。代码实例如下:!
-
jquery判断<img>图片是否加载完成代码实例
使用jqury实现此功能非常的简单，直接看代码实例:$(function(){ $(.ntzon).ch(function() { $(this).lod(function(){
