使用JavaScript解决网页图片拉伸问题

转载请注明出处：http://blog.csdn.net/xiaojimanman/article/details/53084716

http://www.llwjy.com/blogdetail/92b85d1cdb0343a7bd6d8dd0868c0f82.html

个人博客站已经上线了，网址 www.llwjy.com ~欢迎各位吐槽~

-------------------------------------------------------------------------------------------------

在开始之前先打一个小小的广告，自己创建一个QQ群：321903218，点击链接加入群【Lucene案例开发】，主要用于交流如何使用Lucene来创建站内搜索后台，同时还会不定期的在群内开相关的公开课，感兴趣的童鞋可以加入交流。

问题描述

这段时间在做PM的需求的时候突然发现一个问题，产品上的图片来自多个第三方，具体的尺寸无法确定，如果直接在样式中写死图片的尺寸大小就会出现图片拉伸的现象，十分影响产品的美观，因此希望可以找到一个比较好的解决方案。自己先做了一个简单的demo来展示问题。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="./js/jquery-1.11.1.min.js"></script>
	<style>
		.img1{width:200px;height:200px;border: 1px solid #000;overflow: hidden;margin: 10px;}
		.img2{width:200px;height:90px;border: 1px solid #000;overflow: hidden;margin: 10px;}
	</style>
</head>
<body>
	<div class="img1" style="width:">
		<img id="img1" src="./img/1.jpg" height="100%" width="100%">
	</div>
	<div class="img2" style="width:">
		<img id="img2" src="./img/1.jpg" height="100%" width="100%">
	</div>
</body>
</html>

上述这种情况还是挺影响美观的，是否可以考虑动态的设置图片的尺寸呢？

解决思路

是否可以在浏览器加载图片资源后，获取图片的真实尺寸和图片容器的大小，然后动态地设置图片的width、height属性。

获取图片的真实尺寸

html5下已经提供了相应的方法来返回图片的真实尺寸大小（img.naturalWidth、img.naturalHeight），针对IE6/7/8也可以通过以下方法来获取真实尺寸的大小

var imgae = new Image();
		image.src = img.src;
		image.onload = function() {
	    	var w = image.width;
	    	var h = image.height;
}

下面就编写对应的JS方法获取图片的真实尺寸已经图片容器的尺寸大小

setImgSize : function(img, callback) {
	if (img.naturalWidth) { //html5
		callback(img, img.naturalWidth, img.naturalHeight, img.width, img.height);
	} else { // IE 6 7 8
		var imgae = new Image();
		image.src = img.src;
		image.onload = function() {
                   callback(img, image.width, image.height, img.width, img.height);
                }
	}
}

重新设置图片尺寸

在获取图片真实尺寸已经容器尺寸之后，我们需要重新设置图片的尺寸大小。这里先简单的介绍下处理目标：如果设置后的尺寸超过展示区域，则展示图片的中间部分，如果展示区域大于图片尺寸，则图片居中显示。用图简单说明下，黑色实线为图片的显示区域，绿色部分为图片的大小。

下面我们提供三种方法来处理图片，分别实现上部两种（宽度一致）、下部两种（高度一致）、右侧两种（铺满显示区域），下面就分别介绍这三种方法：

一、保证宽度一致

//原始宽度 原始高度 容器宽度 容器高度
//保证宽度一致
resetImgSizeW : function(img, nw, nh, w, h) {
	nwh = nw / nh;
	wh = w / h;
	if (nwh > wh) {
		img.width = w;
		var height = parseInt(1 / nwh * w);
		img.height = height;
		var top = parseInt((h - height) / 2);
		img.style.marginTop = top + "px";
	} else if (nwh < wh) {
		img.width = w;
		var height = parseInt(1 / nwh * w);
		img.height = height;
		var top = parseInt((height - h) / 2) * -1;
		img.style.marginTop = top + "px";
	} else {
		img.height = h;
		img.width = w;
	}
},

在这里我们需要判断图片原始尺寸的长宽比例以及容器的长宽比例之间的关系，如果高度富裕，那就相应将图片往上移动一定的像素，如果高度不足，就将图片往下移动相应的像素，至于其他的两种情况也是同样的逻辑，先看下处理后的效果：

二、保证高度一致

//原始宽度 原始高度 容器宽度 容器高度
//保证高度一致
resetImgSizeH : function(img, nw, nh, w, h) {
	nwh = nw / nh;
	wh = w / h;
	if (nwh > wh) {
		img.height = h;
		var width = parseInt(nwh * h);
		img.width = width;
		var left = parseInt((width - w) / 2) * -1;
		img.style.marginLeft = left + "px";
	} else if (nwh < wh) {
		img.height = h;
		var width = parseInt(nwh * h);
		img.width = width;
		var left = parseInt((w - width) / 2);
		img.style.marginLeft = left + "px";
	} else {
		img.height = h;
		img.width = w;
	}
}

三、铺满显示区域

//原始宽度 原始高度 容器宽度 容器高度
//铺满全屏
resetImgSizeWH : function(img, nw, nh, w, h) {
	nwh = nw / nh;
	wh = w / h;
	if (nwh > wh) {
		img.height = h;
		var width = parseInt(nwh * h);
		img.width = width;
		var left = parseInt((width - w) / 2) * -1;
		img.style.marginLeft = left + "px";
	} else if (nwh < wh) {
		img.width = w;
		var height = parseInt(1 / nwh * w);
		img.height = height;
		var top = parseInt((height - h) / 2) * -1;
		img.style.marginTop = top + "px";
	} else {
		img.height = h;
		img.width = w;
	}
},

如何使用JS

上面对实现的逻辑以及最终的效果做了简单的介绍，下面就介绍下如何使用。

<!-- 引用js脚本 -->
<script src="./js/imageLoad.js"></script>
<script>
	var imageLoad = new ImageLoad();
	//处理网站上所有的图片，下面三种只能使用一种
	//imageLoad.initImg("w");//保证宽度一致
	//imageLoad.initImg("h");//保证高度一致
	//imageLoad.initImg("wh");//铺满显示区域
	//处理单个图片，对于多个自己可以写循环语句来实现
	imageLoad.setImgSize(document.getElementById("img1"), imageLoad.resetImgSizeW);
	imageLoad.setImgSize(document.getElementById("img2"), imageLoad.resetImgSizeW);
	imageLoad.setImgSize(document.getElementById("img3"), imageLoad.resetImgSizeH);
	imageLoad.setImgSize(document.getElementById("img4"), imageLoad.resetImgSizeH);
	imageLoad.setImgSize(document.getElementById("img5"), imageLoad.resetImgSizeWH);
	imageLoad.setImgSize(document.getElementById("img6"), imageLoad.resetImgSizeWH);
</script>

ImageLoad源码

$(document).ready(function() {
	new ImageLoad();
});

ImageLoad = function(){
	this.init();
};

ImageLoad.prototype = {
	init : function () {
//		this.initImg("w");
	},
	initImg : function(type) {
		var _this = this;
		var imgs = document.getElementsByTagName(‘img‘);
		for (var i=0; i<imgs.length; i++) {
			try {
				var img = imgs[i];
				if ("w" == type) {
					$(img).onload = _this.setImgSize(img, _this.resetImgSizeW);
				} else if ("h" == type) {
					$(img).onload = _this.setImgSize(img, _this.resetImgSizeH);
				} else if ("wh" == type) {
					$(img).onload = _this.setImgSize(img, _this.resetImgSizeWH);
				}
			} catch(e) {
			}
		}
	},
	//原始宽度 原始高度 容器宽度 容器高度
	//保证高度一致
	resetImgSizeH : function(img, nw, nh, w, h) {
		nwh = nw / nh;
		wh = w / h;
		if (nwh > wh) {
			img.height = h;
			var width = parseInt(nwh * h);
			img.width = width;
			var left = parseInt((width - w) / 2) * -1;
			img.style.marginLeft = left + "px";
		} else if (nwh < wh) {
			img.height = h;
			var width = parseInt(nwh * h);
			img.width = width;
			var left = parseInt((w - width) / 2);
			img.style.marginLeft = left + "px";
		} else {
			img.height = h;
			img.width = w;
		}
	},
	//原始宽度 原始高度 容器宽度 容器高度
	//保证宽度一致
	resetImgSizeW : function(img, nw, nh, w, h) {
		nwh = nw / nh;
		wh = w / h;
		if (nwh > wh) {
			img.width = w;
			var height = parseInt(1 / nwh * w);
			img.height = height;
			var top = parseInt((h - height) / 2);
			img.style.marginTop = top + "px";
		} else if (nwh < wh) {
			img.width = w;
			var height = parseInt(1 / nwh * w);
			img.height = height;
			var top = parseInt((height - h) / 2) * -1;
			img.style.marginTop = top + "px";
		} else {
			img.height = h;
			img.width = w;
		}
	},
	//原始宽度 原始高度 容器宽度 容器高度
	//铺满全屏
	resetImgSizeWH : function(img, nw, nh, w, h) {
		nwh = nw / nh;
		wh = w / h;
		if (nwh > wh) {
			img.height = h;
			var width = parseInt(nwh * h);
			img.width = width;
			var left = parseInt((width - w) / 2) * -1;
			img.style.marginLeft = left + "px";
		} else if (nwh < wh) {
			img.width = w;
			var height = parseInt(1 / nwh * w);
			img.height = height;
			var top = parseInt((height - h) / 2) * -1;
			img.style.marginTop = top + "px";
		} else {
			img.height = h;
			img.width = w;
		}
	},
	//获取图片真实尺寸以及容器尺寸
	setImgSize : function(img, callback) {
		if (img.naturalWidth) { //html5
			callback(img, img.naturalWidth, img.naturalHeight, img.width, img.height);
		} else { // IE 6 7 8
			var imgae = new Image();
			image.src = img.src;
			image.onload = function() {
	            callback(img, image.width, image.height, img.width, img.height);
	        }
		}
	},
}

上面代码还有很多可以优化的地方，欢迎大家在评论区留言交流

-------------------------------------------------------------------------------------------------
小福利
-------------------------------------------------------------------------------------------------
      个人在极客学院上《Lucene案例开发》课程已经上线了，欢迎大家吐槽~

第一课：Lucene概述

第二课：Lucene 常用功能介绍

第三课：网络爬虫

第四课：数据库连接池

第五课：小说网站的采集

第六课：小说网站数据库操作

第七课：小说网站分布式爬虫的实现

第八课：Lucene实时搜索

第九课：索引的基础操作

时间： 2024-10-07 18:40:07

使用JavaScript解决网页图片拉伸问题的相关文章

网页背景图片拉伸

解决方法有两种: 一种是CSS,使用background-size:cover实现图片的拉伸效果,但是IE8及以下版本不支持background-size,于是可以使用微软的滤镜效果,但是IE6不支持. body{background:url(bg.jpg) center center;background-size:cover;height:900px;width:100%; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(s

Zxing图片拉伸解决 Android 二维码扫描

二维码扫描  Android Zxing图片拉伸解决 Zxing是google提供的二维码扫描工程 默认是横屏的  转换成竖屏后图片出现拉伸 这里提供解决办法: Zxing  修改 CameraConfigurationManager.java文件的 void initFromCameraParameters(Camera camera)方法 在 Log.d(TAG, "Screen resolution: " + screenResolution);这句之后增加 Point scre

用javascript协助导入图片

用javascript协助导入图片 需求 先说说需求.春节回家见爸妈,老爸迷上了摄影.他把平时的照片都上传到了 成都图片网, 这个成都图片网专门有一个 “快拍成都” 的版块,用于大家将随手拍的生活中的图片分享上去.每天编辑还会选出一张最有特色的图片,刊登到<成都商报>上. 快拍成都版块的网址是:http://photo.chengdu.cn/diary.php,另外,这个成都图片网还带有一个 “ 拍客论坛 “,论坛的网址是:http://photo.chengdu.cn/bbs/. 老爸在兴奋

解决PNG图片在IE6中背景不透明的问题

1.解决PNG图片在IE6中背景不透明的CSS与JS代码   -   TOP JS代码  function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. { var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5) &a

解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背

解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背 目录 解决代码 解决png图片在html中 解决png作为网页背景-css 1.解决PNG图片在IE6中背景不透明的CSS与JS代码   -   TOP JS代码  function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. { var arVersion = navigator.appVersion.split("MSIE&quo

网页图片不能复制怎么办？我有妙招。

网页图片不能复制怎么办?我有妙招. 把下面这段代码复制到地址栏,然后按回车键.之后就可以复制当前页面了. javascript:alert(document.onselectstart = document.oncontextmenu= document.onmousedown = document.onkeydown= function(){return true;}); 很多资料性的网络文章,往往在网页禁止使用“复制”.“粘贴”命令. 其解决方法如下: 方法一.最简单的破解方法: 单击IE浏

一个咸鱼的Python爬虫之路（三）：爬取网页图片

学完Requests库与Beautifulsoup库我们今天来实战一波,爬取网页图片.依照现在所学只能爬取图片在html页面的而不能爬取由JavaScript生成的图.所以我找了这个网站http://www.ivsky.com 网站里面有很多的图集,我们就找你的名字这个图集来爬取 http://www.ivsky.com/bizhi/yourname_v39947/ 来看看这个页面的源代码: 可以看到我们想抓取的图片信息在<li> 里面然后图片地址在img里面那么我们这里可以用Beautifu

Javascript限制网页只能在微信内置浏览器中访问

转载:http://segmentfault.com/a/1190000000754332 最近正在开发一个微信公众账号,其中有一项功能是用户发送文字消息给公众号,然后公众号返回图文消息给用户,用户再点击图文消息即可跳转到一个网页链接,在微信的内置浏览器中打开.那么问题就来了,这个网页首先涉及到了移动web前端开发,我优先选择了用HTML5+bootstrap组合来实现页面的美观效果,前端其他的任务交给javascript解决(这里我是完全使用原生javascript代码,没有用到任何的框架,因

网页图片宽度和高度自适应的方法

在我们设计网页的时候,经常会遇到图片自适应问题,实际这些工作完全可以交给浏览器来完成就可以了,只可惜,无论是IE还是FIREFOX在图片自适应这个问题上都处理的不尽人意,网上实现网页图片宽度和高度的方法也很多,主要又两种: 第一种是使用CSS来完成:第二种是使用Javascript来完成,根据实际的应用效果来说,使用Javascript还是比较靠谱一点,因为CSS的expression的确有点烦,笔者是指使用效果上有点恼人,本文专门把这两种都总结一下,方便站长们参考使用. 一.使用CSS实现图片