`
txf2004
  • 浏览: 6881691 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

图片不完全按比例自动缩小

 
阅读更多
使用背景:

 开发前期用自动生产 固定大小的图片 进行 显示,发现不能满足,在前期的时候把保存了原图,现在只能显示原图,原图由于上传时候没有做任何限制所有要使用 图片不完全按比例缩小
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图片不完全按比例自动缩小的简单代码

    代码如下:jQuery(document).ready(function(){ /* 图片不完全按比例自动缩小*/ $(window).load(function(){$(‘#content div.thumbnail img’).each(function(){ var x = 200; //填入目标图片宽度 var y =...

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

    有时我们会有这样的需求:让图片显示在固定大小的区域。如果不考虑 IE6 完全可以使用 css 的 max-width 限制宽度自动按比例缩小显示,但是这样有个问题,就是如果按比例缩小后,图片高度不够,那么就很难看了

    jquery实现图片按比例缩放示例

    &lt;html&gt; &lt;title&gt;&lt;/title&gt; &lt;head&gt;&lt;/head&gt; &lt;style&gt; .thumbnail{overflow:hidden;width:400px;height:240px;... /* 图片不完全按比例自动缩小 by zwwooooo */

    图片管理系统(桃源相册管理)

    上传完毕自动生成等比例缩略图。 52.可以同时下载多张网络图片到空间,并可设置水印等功能。 53.上传时可自由设置是否在照片上添加文字水印、图片水印或不添加水印。 54.用户分组设置,可分多组域名及多台服务器协同...

    fastpictureviewer64位中文破解版.rar

    启用图片自动旋转功能将指示本软件按照图片的EXIF方向标志来呈现图片,旋转图片会导致图片缩小30%左右。智能鼠标加速功能将动态调整在绽放模式时的照片卷动及鼠标滚动的速度,启用该功能在显示大图片时可以减少鼠标...

    桌面挂机锁V2.0

    6) 锁屏背景:支持本地图片或网络图片,若图片超过当前屏幕的最大尺寸,会自动裁边并同比例缩小; 7) 背景透明:0 全透明,255 不透明; 8) 时钟显示:锁屏后,在解锁窗口右键鼠标,选择显示时间; 命令行参数说明...

    桃源相册管理系统v2.3

    上传完毕自动生成等比例缩略图。 52.可以同时下载多张网络图片到空间,并可设置水印等功能。 53.上传时可自由设置是否在照片上添加文字水印、图片水印或不添加水印。 54.用户分组设置,可分多组域名及多台服务器协同...

    桃源相册管理系统源码 v2.3

    上传完毕自动生成等比例缩略图。 52.可以同时下载多张网络图片到空间,并可设置水印等功能。 53.上传时可自由设置是否在照片上添加文字水印、图片水印或不添加水印。 54.用户分组设置,可分多组域名及多台服务器协同...

    C# for CSDN 乱七八糟的看不懂

    本文由abc2253130贡献 doc文档可能在WAP端浏览体验不佳。建议您优先选择TXT,或下载源文件到本机查看。 C#(WINFORM)学习 一、 C#基础 基础 类型和变量 类型和变量 类型 C# 支持两种类型:“值类型”和“引用类型...

    css入门笔记

    4.auto 自动,溢出时自动显示滚动条并且可用 ============================== 9.29 1、边框线 属性:border: 取值: 2、边框倒角 属性:border-radius: 取值: px % 3、边框阴影 属性:box-shadow: 取值: ...

Global site tag (gtag.js) - Google Analytics