网站更新时经常遇到图片尺寸大于页面容器尺寸的情况。通常我们需要将其缩放至适当大小。但是有时候并不理想,比如缩放导致的图片拉伸、压缩等变形,造成图片超级难看。今天我们就用JavaScript来自动完成图片按比例缩放工作,让图片既可以缩放,而且不变形。
HTML代码:
<div id="demo1">
<img src="http://www.blue1000.com/upload/2014-01/140117101136771.jpg" alt="">
</div>
CSS代码:
#demo1{width:800px;height:300px;overflow:hidden;}
JavaScript代码、JS代码:
/**
* 已知图片的宽度和高度的等比例缩放
*/
function knowImgSize(id) {
var idWidth = $(id).width(), // 容器的宽度和高度
idHeight = $(id).height();
$(id + ' img').each(function(index,img){
var img_w = $(this).width(),
img_h = $(this).height();
// 如果图片自身宽度大于容器的宽度的话 那么高度等比例缩放
if(img_w > idWidth) {
var height = img_h * idWidth / img_w;
$(this).css({"width":idWidth, "height":height});
}
});
}
// 初始化
$(function(){
knowImgSize("#demo1");
});
缩放的原理逻辑图:
以上代码可以举一反三、灵活使用,让你的网页变得更人性化。