，如何将js计算的图片高度设置图片显示的高度，js源码及图片显示源码如下，多谢

在线等，怎么将js计算的图片高度设置图片显示的高度，js源码及图片显示源码如下，谢谢
要加载别的网页的某个图片显示，但是要使得图片底部的20px高不显示，如图：
，如何将js计算的图片高度设置图片显示的高度，js源码及图片显示源码如下，多谢

但是从别的网页上加载的图片大小不确定，所以现在的思路是先用js在图片预加载期间得到图片的高度和宽度
然后将得到的高度减去20px 的值设置为图片最终显示的高度
现在在网上找到一个imgready.js文件可以在预加载期间计算出图片的高度，但是怎么用来设置显示图片的高度呢？
imgready.js文件：



/**

 * 图片头数据加载就绪事件 - 更快获取图片尺寸

 * @version	2011.05.27

 * @see		http://blog.phpdr.net/js-get-image-size.html

 * @param	{String}	图片路径

 * @param	{Function}	尺寸就绪

 * @param	{Function}	加载完毕 (可选)

 * @param	{Function}	加载错误 (可选)

 * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {

		alert('size ready: width=' + this.width + '; height=' + this.height);

	});

 */

var imgReady = (function () {

	var list = [], intervalId = null,


	// 用来执行队列

	tick = function () {

		var i = 0;

		for (; i < list.length; i++) {

			list[i].end ? list.splice(i--, 1) : list[i]();

		};

		!list.length && stop();

	},


	// 停止所有定时器队列

	stop = function () {

		clearInterval(intervalId);

		intervalId = null;

	};


	return function (url, ready, load, error) {

		var onready, width, height, newWidth, newHeight,

			img = new Image();


		img.src = url;


		// 如果图片被缓存，则直接返回缓存数据

		if (img.complete) {

			ready.call(img);

			load && load.call(img);

			return;

		};


		width = img.width;

		height = img.height;


		// 加载错误后的事件

		img.onerror = function () {

			error && error.call(img);

			onready.end = true;

			img = img.onload = img.onerror = null;

		};


		// 图片尺寸就绪

		onready = function () {

			newWidth = img.width;

			newHeight = img.height;

			if (newWidth !== width || newHeight !== height ||

				// 如果图片已经在其他地方加载可使用面积检测

				newWidth * newHeight > 1024

			) {

				ready.call(img);

				onready.end = true;

			};

		};

		onready();


		// 完全加载完毕的事件

		img.onload = function () {

			// onload在定时器时间差范围内可能比onready快

			// 这里进行检查并保证onready优先执行

			!onready.end && onready();


			load && load.call(img);


			// IE gif动画会循环执行onload，置空onload即可

			img = img.onload = img.onerror = null;

		};


		// 加入队列中定期执行

		if (!onready.end) {

			list.push(onready);

			// 无论何时只允许出现一个定时器，减少浏览器性能损耗

			if (intervalId === null) intervalId = setInterval(tick, 40);

		};

	};

})();

要处理的html文件：



<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

       <script language="JavaScript" src="imgReady.js"></script>

    </head>

    <body>

    <div>

<img height=this.height-20 onload="imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {

        alert('size ready: width=' + this.width + '; height=' + this.height);

    });"

</div>

   

    </body>

</html>

但是没有得到想要的设置图片底部20px的图像不显示的效果，本文想要的效果是只显示一张图片自底部20px开始向上的所有像素图像

请帮忙看一下，谢谢，或者提供更好的设置方法设置不确定大小的图片只显示指定部分的方法，谢谢
------解决思路----------------------
还可以这样

<div style="overflow: hidden;"><img style="margin-bottom: -20px;" src="http://avatar.****.net/4/A/0/1_zhaoxiatengkong_1.jpg" /></div>

，如何将js计算的图片高度设置图片显示的高度，js源码及图片显示源码如下，多谢

相关推荐