jq实现图片在父级容器内等比例缩放且居中显示

责编:menVScode 2017-11-16 13:21 阅读(971)

jq实现图片在父级容器内等比例缩放且居中显示

css样式

demo{width: 500px;height: 250px;overflow: hidden;background: red;margin-bottom: 15px;}

html文件

<div class="demo">
	<img src="http://www.menvscode.com/upload/5622494167978058.jpg" alt="">
</div>
<div class="demo">
	<img src="http://menvscode.com/public/img/logo.png" alt="">
</div>
<div class="demo">
	<img src="http://menvscode.com/public/img/notebg.png" alt="">
</div>

js文件

function resizeImg(obj){
	var bigWidth = $(obj).width();
	var bigHeight = $(obj).height();

	$(obj).each(function(){
		var _this = $(this).find("img");
		var imgWidth = _this.width();
		var imgHeight = _this.height();
		var scale;
		if(imgWidth>bigWidth || imgHeight>bigHeight){
			var scaleW = imgWidth/bigWidth;
			var scaleH = imgHeight/bigHeight;

			if(scaleW>scaleH){
				scale = scaleW;
			}else{
				scale = scaleH;
			}
		}else{
			scale=1;
		}
		_this.css({
			"width":imgWidth/scale,
			"height":imgHeight/scale,
			"marginTop":(bigHeight-(imgHeight/scale))/2+'px',
			"marginLeft":(bigWidth-(imgWidth/scale))/2+'px'
		});

	});
}
// 初始化
$(function(){
    resizeImg('.demo');//参数为父级容器对象
});


改进了一下

html文件

<div class="demo">
	<img class='pic' src="http://www.menvscode.com/upload/5622494167978058.jpg" alt="">
</div>
<div class="demo">
	<img class='pic' src="http://menvscode.com/public/img/logo.png" alt="">
</div>
<div class="demo">
	<img class='pic' src="http://menvscode.com/public/img/notebg.png" alt="">
</div>

js代码

function resizeImg(obj,bigWidth,bigHeight){

	$(obj).each(function(){
		var imgWidth = $(this).width();
		var imgHeight = $(this).height();

		var scale;
		if(imgWidth>bigWidth || imgHeight>bigHeight){
			var scaleW = imgWidth/bigWidth;
			var scaleH = imgHeight/bigHeight;

			if(scaleW>scaleH){
				scale = scaleW;
			}else{
				scale = scaleH;
			}
		}else{
			scale=1;
		}
		$(this).css({
			"width":imgWidth/scale,
			"height":imgHeight/scale,
			"marginTop":(bigHeight-(imgHeight/scale))/2+'px',
			"marginLeft":(bigWidth-(imgWidth/scale))/2+'px'
		});

	});
}
			
 // 初始化
 $(function(){
    resizeImg('.pic',500,250);//图片对象,父级容器宽度,父级容器高度
 });


后面考虑到图片加载问题,可能导致获取不到图片宽高的问题,通过 new Image() 实例进行进一步改进。

html代码

<div class="demo">
	<img class='pic' data-src="http://www.menvscode.com/upload/5622494167978058.jpg" alt="">
</div>
<div class="demo">
	<img class='pic' data-src="http://menvscode.com/public/img/logo.png" alt="">
</div>
<div class="demo">
	<img class='pic' data-src="http://menvscode.com/public/img/notebg.png" alt="">
</div>

js代码

function resizeImg(obj,bigWidth,bigHeight){
	$(obj).each(function(){
		var imgWidth;
		var imgHeight;
		var scale;
		var _this = $(this);
		var imgSrc = _this.attr('data-src');

		var imgObj = new Image();
		imgObj.src = imgSrc;

		imgObj.onload = function() {
			imgWidth = imgObj.width;
			imgHeight = imgObj.height;

			if(imgWidth>bigWidth || imgHeight>bigHeight){

				var scaleW = imgWidth/bigWidth;
				var scaleH = imgHeight/bigHeight;

				if(scaleW>scaleH){
					scale = scaleW;
				}else{
					scale = scaleH;
				}
			}else{
				scale=1;
			}

			_this.css({
				"width":imgWidth/scale,
				"height":imgHeight/scale,
				"marginTop":(bigHeight-(imgHeight/scale))/2+'px',
				"marginLeft":(bigWidth-(imgWidth/scale))/2+'px'
			});
			_this.attr('src',imgSrc);
		}
	});
}
	
$(function(){
    resizeImg('.pic',500,250);
});

效果

QQ截图20171116132350

标签: 缩放 居中 图片 jq
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码