jquery图片不完全按比例自动缩小的简单代码
更新时间：2013年07月29日 12:05:01 作者：
开发前期用自动生产 固定大小的图片 进行 显示，发现不能满足，在前期的时候把保存了原图，现在只能显示原图，原图由于上传时候没有做任何限制所有要使用 图片不完全按比例缩小，下面是代码
复制代码 代码如下:
jQuery(document).ready(function()
{
/* 图片不完全按比例自动缩小*/
$(window).load(function(){$('#content div.thumbnail img').each(function(){ var x = 200;
//填入目标图片宽度
var y = 140;
//填入目标图片高度
var w=$(this).width(), h=$(this).height();
//获取图片宽度、高度
if (w > x) {
//图片宽度大于目标宽度时
var w_original=w, h_original=h; h = h * (x / w);
//根据目标宽度按比例算出高度 w =x;
//宽度等于预定宽度 if (h < y) {
//如果按比例缩小后的高度小于预定高度时
w = w_original * (y /h_original);
//按目标高度重新计算宽度 h = y;
//高度等于预定高度
}
}
$(this).attr({width:w,height:h}); }); }); });
相关文章
JQuery页面显示的内容没有边距，内容紧挨着浏览器边线，下面有个不错的解决方法，大家可以尝试下2013-12-12
今天小编就为大家分享一篇关于jQuery.parseJSON()函数详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-02-02
本文给大家介绍jquery效果大全之制作电脑健康体检得分特效，并附有源码下载，对jquery效果大全感兴趣的朋友一起学习吧2015-11-11
JQuery 文本框使用小结，主要是事件的绑定，结合下js的用法。2010-05-05
查询功能是开发中最重要的一个功能，大量数据的显示，我们用的最多的就是分页。2011-02-02
这篇文章主要为大家详细介绍了jQuery开发之内容滑动切换效果的相关资料，jquery.hwSlide.js插件进行封装具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
本文就是要利用cookie插件，获取用户浏览文章历史记录，并将用户最近浏览历史记录显示在页面，感兴趣的小伙伴们可以参考一下2016-04-04![jQuery 表格隔行变色代码[修正注释版]](//img.jbzj.com/images/xgimg/bcimg7.png)
代码比较精简，大家可以了解下jquery的对象控制方法2008-11-11
这篇文章主要介绍了超级简单的jquery操作表格方法,可实现针对表格行与列的增加及删除操作,是非常实用的技巧,需要的朋友可以参考下2014-12-12
遇到要重复多次同样的事时，就想找一种省时省力的方法，下面就为大家介绍下利用jquery选择符快速提取web表单数据2014-03-03
![jQuery 表格隔行变色代码[修正注释版]](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论