基于jquery实现等比缩放图片
更新时间:2014年12月03日 16:03:15 投稿:hebedich
这篇文章主要给大家分享了一段基于jquery实现等比缩放图片的代码,非常的实用,这里推荐给大家
基于jquery的图片尺寸调整
resize.js
复制代码 代码如下:
$(window).bind("load", function() {
// IMAGE RESIZE
$('#product_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
});
代码很简洁,使用起来也很简单,小伙伴们直接使用即可
相关文章
jquery 实现的改变颜色与背景的代码 change(fontsize,background)补充2
change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。2010-05-05使用jQuery不判断浏览器高度解决iframe自适应高度问题
这篇文章主要介绍了使用jQuery不判断浏览器高度解决iframe自适应高度问题,需要的朋友可以参考下2014-12-12jquery append()方法与html()方法的区别及使用介绍
append()方法在被选元素的结尾插入指定内容,html()方法返回或设置被选元素的内容,下面为大家介绍下两者的区别及使用2014-08-08
最新评论