现在位置首页 / Jquery/Jquery Mobile /正文

Jquery解决缩略图变形问题

作者: IT小兵 | 2013年7月14日| 热度:℃ | 评论: |参与:

我这个网站上线,几天后,不少人投诉我的缩略图太没人性了。

我也是这么觉得。但是一直没有时间修改。

这不是清明放假了,济南小雨,只好宅在家里,改改程序啥的。

先上图。看看有多难看:


我想了3个解决办法:

1.生成固定大小的缩略图:现在这个显示框的大小是222px 160px。我可以预先生成这么大小的图片。但是考虑我的可怜的空间资源。这个就否定了。

2.css截取:这个应该也是可以的。但是不大熟悉。

3.js截取图片:这个js肯定是能够完成。考虑到对这个还是比较熟悉,而且图片最终还是要下载到客户端。所以决定用这个方案。

转:

jQuery图片居中裁切效果

大家在做相册列表的时候可能会遇到这样的情况,用户上传的图片大小不一,长宽不一,然而需求的列表却是固定宽高的如图:

此脚本拟达到以下需求
1.当图片高或宽超过父容器时截取中间部分显示。
2.当图片宽高小于父容器时,居中显示。
查看demo:http://blog.dmtuan.com/demo/zmnImgCenter/demo.html

初次写脚本,请尽量拍砖。

脚本: 

//调用$(function(){
	zmnImgCenter($(".t-img"));//JQ的dom});//图片居中function zmnImgCenter(obj){
	obj.each(function(){var $this=$(this);var objHeight=$this.height();//图片高度var objWidth=$this.width();//图片宽度var parentHeight=$this.parent().height();//图片父容器高度var parentWidth=$this.parent().width();//图片父容器宽度var ratio=objHeight/objWidth;if(objHeight>parentHeight && objWidth>parentWidth){//当图片宽高都大于父容器宽高if(objHeight>objWidth){//赋值宽高
					$this.width(parentWidth);
					$this.height(parentWidth*ratio);}else{
					$this.height(parentHeight);
					$this.width(parentHeight/ratio);}
				objHeight=$this.height();//重新获取宽高
				objWidth=$this.width();if(objHeight>objWidth){
					$(this).css("top",(parentHeight-objHeight)/2);//定义top属性}else{//定义left属性
					$(this).css("left",(parentWidth-objWidth)/2);}}else{//当图片宽高小于父容器宽高if(objWidth>parentWidth){//当图片宽大于容器宽,小于时利用css text-align属性居中
					$(this).css("left",(parentWidth-objWidth)/2);}
				$(this).css("top",(parentHeight-objHeight)/2);}})}


点击阅读本文所属分类的更多文章: Jquery/Jquery Mobile 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询