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

举例来说

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

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

 

这时用 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在这里是对指定的图片集合对象逐一调用下面的方法。

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

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

赞 (0)

相关推荐

  • jQuery设置图片等比例缩小的方法

    本文实例讲述了jQuery设置图片等比例缩小的方法.分享给大家供大家参考,具体如下: 网站的内容页面,经常要放图片,如果图片太大会撑出,影响页面美观.如果只是用css限制图片的最大宽度,会引起图片的变形,这里建议还是用js来实现,实现方式如下: <script language="javascript" type="text/javascript"> window.onload = function () { //判断图片大小,超过一定宽度,要通过js定

  • jquery实现页面图片等比例放大缩小功能

    html代码结构: 复制代码 代码如下: <a href=""><img src="images/tmp_376x470.jpg" width="300" height="300" alt=""/></a><a href=""><img src="images/tmp_409x265.jpg" width=&quo

  • jQuery实现按比例缩放图片的方法

    本文实例讲述了jQuery实现按比例缩放图片的方法.分享给大家供大家参考,具体如下: 做网站的时候,相信有很多朋友都会遇到图片过大,导致页面撑开变形的问题,如果强制设置width,height,图片则会因为强制变形而走样.在这里我介绍一种简单的按比例缩放图片的方法. 对于一堆图片 <img src="1.jpg" border="1"></img> <img src="2.jpg" border="1&qu

  • jquery 图片上传按比例预览插件集合

    js部分是这样的: 复制代码 代码如下: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:iddqd5376@163.com //http://blog.sina.com.cn/iddqd //版本:1.0 //说明:图片上传预览插件 //上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置: //width 存放图片固定大小容器的宽 //height 存放图片

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

    <html> <title></title> <head></head> <style> .thumbnail{overflow:hidden;width:400px;height:240px;} </style> <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> <script langu

  • jquery图片不完全按比例自动缩小的简单代码

    复制代码 代码如下: 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

  • jQuery实现等比例缩放大图片让大图片自适应页面布局

    在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"

  • 用jquery等比例控制图片宽高的具体实现

    核心代码: $(function() { $(".dvcontent img").each(function() { var maxwidth = 520; if ($(this).width() > maxwidth) { var oldwidth = $(this).width(); var oldheight = $(this).height(); var newheight = maxwidth/oldwidth*oldheight; $(this).css({width

  • jquery实现根据浏览器窗口大小自动缩放图片的方法

    本文实例讲述了jquery实现根据浏览器窗口大小自动缩放图片的方法.分享给大家供大家参考.具体如下: (function($){ $.fn.resizeimage = function(){ var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.height); } else { img.onload =

  • jquery实现图片等比例缩放以及max-width在ie中不兼容解决

    上次用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题 jQuery部分代码 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function(){ var maxWidth=$(".imgBox").width(); $("img").each(function(){

  • 基于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)

  • jquery 图片预加载 自动等比例缩放插件

    jquery 图片预加载 自动等比例缩放插件

    复制代码 代码如下: /* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大

  • 用jquery实现等比例缩放图片效果插件

    复制代码 代码如下: jQuery.fn.autoZoomLoadImage = function(scaling, width, height, loadPic) { if (loadPic == null) loadPic = "Loading.gif"; return this.each(function() { var t = $(this); var src = $(this).attr("src"); var img = new Image(); //a

随机推荐