首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:53:05
字体:
来源:转载
供稿:网友
遇到大图片将页面容器“撑破”的情况在进行页面布局时会经常遇到吧,在本文将为大家讲述使用jQuery实现按比例缩放大图片,让大图片自适应页面布局

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

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

1.已知图片尺寸

复制代码 代码如下:


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


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

下面隆重介绍下autoIMG。

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

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

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

复制代码 代码如下:


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


autoIMG实例下载
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选