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


Posted in Javascript onOctober 16, 2013

在布局页面时,有时会遇到大图片将页面容器“撑破”的情况,尤其是加载外链图片(通常是通过采集的外站的图片)。那么本文将为您讲述使用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实例下载
Javascript 相关文章推荐
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
angular2中使用第三方js库的实例
Feb 26 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 #Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 #Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 #Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 #Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 #Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 #Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 #Javascript
You might like
php获取域名的google收录示例
2014/03/24 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
python thread 并发且顺序运行示例
2009/04/09 Python
在Python中使用模块的教程
2015/04/27 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
Python中常见的数制转换有哪些
2020/05/27 Python
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
先进集体事迹材料
2014/02/17 职场文书
绿色环保口号
2014/06/12 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
前台文员岗位职责
2015/02/04 职场文书
小学教师年度个人总结
2015/02/05 职场文书
结婚堵门保证书
2015/05/08 职场文书
医德医风学习心得体会
2016/01/25 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
分享Python异步爬取知乎热榜
2022/04/12 Python
netty 实现tomcat的示例代码
2022/06/05 Servers