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 相关文章推荐
javascript白色简洁计算器
May 04 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
限制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
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
Python将图片转换为字符画的方法
2020/06/16 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
高中运动会入场词
2014/02/14 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang