基于jQuery的图片不完全按比例自动缩小


Posted in Javascript onJuly 11, 2014

举例来说

第一种情况:如图片大小为 600×350,显示区域大小为 200×140,如果图片根据目标宽度(200)按比例缩放后大小变成 116,那么显示在 200×140 就会很难看。如下图左

第二种情况:刚好相反,如图片大小为400×400,显示区域同样是200×140,如果图片根据目标高度(140)按比例缩放后大小变成 140,即 140×140,同样难看。如下图右

 基于jQuery的图片不完全按比例自动缩小  基于jQuery的图片不完全按比例自动缩小

这时用 jQuery 获取图片大小再判断处理一下就稍微好点:如第一种情况按140高度算出宽度 140×600/350=240,然后图片按240×140显示,多余部分用 css 的 overflow:hidden 隐藏。

下面是我的处理方法:(注意 - 这里所说的是原图片宽高都大于目标显示框大小的情况下——所以才叫缩小)

Demo 》这里

Html 部分

假如显示区域的 class 为 thumbnail

<div id="content">

 <div class="thumbnail"><img src="" alt="" /></div>

</div>

css 部分

.thumbnail{overflow:hidden;width:200px;height:140px;}

jQuery 部分

1. 当然是先挂 jQuery 库了,怎样挂自行Google、百度
2. 核心代码

jQuery(document).ready(function(){
/* 图片不完全按比例自动缩小 by zwwooooo */
  $(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});
	});
  });
});

适用场所:固定大小的图片显示区域,如缩略图。

折腾完。

下面推荐个内容页面中常用图片大小控制代码:

<script type="text/javascript">
$(window).load(function() {  
  $(".cont img").each( function() {
 var maxwidth = 800;
 if ($(this).width() > maxwidth) {
  $(this).width(maxwidth);
 }
}); 
}); 
</script>

代码不用解释,值得注意的是两个地方:

第一:$(window).load(function() { 

声明事件的部分使用$(window).load,不能使用$(document).ready。
我在百度和iteye网站看到有相关的文章,方法都是错误的。根本不起作用。

第二:$(".cont img").each( function()

这里是.each( function() { ....  }),each在这里是对指定的图片集合对象逐一调用下面的方法。

这种方法兼容大部分的浏览器,效果也很便捷。

个人感觉这种方法比较顺手,另外,可以拓展为缩略图的控制方法。

Javascript 相关文章推荐
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
js动态改变select选择变更option的index值示例
Jul 10 #Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 #Javascript
js确认删除对话框适用于a标签及submit
Jul 10 #Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 #Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 #Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 #Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 #Javascript
You might like
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
PHP内置加密函数详解
2016/11/20 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
pandas中Timestamp类用法详解
2017/12/11 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
python list转置和前后反转的例子
2019/08/26 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
办公室主任先进事迹
2014/01/18 职场文书
2015年春节标语口号
2014/12/09 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS