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

在布局页面时，有时会遇到大图片将页面容器“撑破”的情况，尤其是加载外链图片（通常是通过采集的外站的图片）。那么本文将为您讲述使用jQuery如何按比例缩放大图片，让大图片自适应页面布局。

通常我们处理缩略图是使用后台代码（PHP、.net、Java等）根据大图片生成一定尺寸的缩略图，来供前台页面调用，当然也有使用前台javascript脚本将加载后的大图强行缩放，变成所谓的缩略图，这种方法不可取。但是，针对网站内容页，如本站文章详情页，如果需要加载一张很大的图片时，为了防止“撑破”布局，我们使用jQuery来等比例缩放图片。我们分两种情况来讲述：

1.已知图片尺寸


代码如下:

<div id="demo1">
<img src="a.jpg" width="800" height="300" alt="图片">
</div>

当页面加载的图片中含有属性width和height值，则可以使用几句简单的jQuery代码实现等比例缩放。


代码如下:

$(function(){
var w = $("#demo1").width();//容器宽度
$("#demo1 img").each(function(){//如果有很多图片，我们可以使用each()遍历
var img_w = $(this).width();//图片宽度
var img_h = $(this).height();//图片高度
if(img_w>w){//如果图片宽度超出容器宽度--要撑破了
var height = (w*img_h)/img_w; //高度等比缩放
$(this).css({"width":w,"height":height});//设置缩放后的宽度和高度
}
});
});

2.未知图片尺寸

当页面加载的图片尺寸未知的情况下，上述代码则不能进行有效的缩放，这种情况多出现在采集的外部链接图片。


代码如下:

<div id="demo2">
<img src="a.jpg" alt="图片">
</div>

所幸的是，有好心朋友已经写出来专门的插件来处理，而且跨浏览器，解决了前端朋友们的一大难题。

下面隆重介绍下autoIMG。

autoIMG可以快速对文章图片进行尺寸自适应，它利用浏览器获取图片文件头尺寸数据，无需等待图片加载完成。

autoIMG兼容：Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | ...

调用autoIMG插件方法相当简单：


代码如下:

$(function(){
$("#demo2").autoIMG();
});

autoIMG实例下载

赞 (0)

相关推荐

  • 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.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

  • 基于jquery实现图片相关操作（重绘、获取尺寸、调整大小、缩放）

    本文为大家分享了四个jquery图片常见操作,供大家参考,具体内容如下 1.关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现. $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(

  • JQuery 图片延迟加载并等比缩放插件

    JQuery 图片延迟加载并等比缩放插件

    最近在学习JS的OOP所以写了这么个东西 使用方法: $(".viewArea img").zoom({height:74,width:103}); 效果演示: http://demo.jb51.net/html/jquery_img/jquery_img.htm代码: 复制代码 代码如下: (function($){ $.fn.zoom = function(settings){ //一些默认配置: settings = $.extend({ height:0, width:0, l

  • jQuery实现的鼠标滚轮控制图片缩放功能实例

    jQuery实现的鼠标滚轮控制图片缩放功能实例

    本文实例讲述了jQuery实现的鼠标滚轮控制图片缩放功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jQuery实现鼠标滚轮动态改变样式或效果

    代码如下: 复制代码 代码如下: $(window).scroll(function() {             var scrolls = $(this).scrollTop();             $(".context_block").each(function(){ //类名为"context_block"的块级元素                 var height = $(this).height();                 if(

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

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

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

  • jQuery图片预加载 等比缩放实现代码

    复制代码 代码如下: /* * Image preload and auto zoom * scaling 是否等比例自动缩放 * width 图片最大高 * height 图片最大宽 * loadpic 加载中的图片路径 * example $("*").LoadImage(true,w,h); */ jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ if(loadpic==null)loadpic=".

  • 基于jquery实现鼠标滚轮驱动的图片切换效果

    基于jquery实现鼠标滚轮驱动的图片切换效果

    jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个基于鼠标滚轮驱动的图片切换效果. 本例实现的效果: 鼠标滚轮滚动时图片进行切换. 支持键盘方向键实现图片切换效果. 支持点击图片切换,支持点击当前图片链接. 进度条滑块展示图片图片数量进度. XHTML <div class="demo"> <div id="imageflow"> <div id="loading">&l

  • jquery横向纵向鼠标滚轮全屏切换

    jquery横向纵向鼠标滚轮全屏切换

    本文实例为大家分享了鼠标滚轮全屏切换的jquery代码,供大家参考,具体内容如下 html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name

  • JQuery实现鼠标滚轮滑动到页面节点

    JQuery实现鼠标滚轮滑动到页面节点

    下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍,并通过展示效果图展示给大家. 基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 实现的代码. html代码: <section class="panel home" data-section-name="home"> <div class="inner"> <h

  • 基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )

    复制代码 代码如下: <div id="Scroll" style="background-color: Green; width: 2000px; height:2000px;"> 请写很多数据-- </div> <div id="lookMore">more...</div> <script src="jquery-1.7b1.js" type="text/j

随机推荐