如何对网站进行管理,网站出售html,wordpress 商家,东莞网站建设科技公司在布局页面时#xff0c;有时会遇到大图片将页面容器“撑破”的情况#xff0c;尤其是加载外链图片#xff08;通常是通过采集的外站的图片#xff09;。那么本文将为您讲述使用jQuery如何按比例缩放大图片#xff0c;让大图片自适应页面布局。通常我们处理缩略图是使用后… 在布局页面时有时会遇到大图片将页面容器“撑破”的情况尤其是加载外链图片通常是通过采集的外站的图片。那么本文将为您讲述使用jQuery如何按比例缩放大图片让大图片自适应页面布局。通常我们处理缩略图是使用后台代码PHP、.net、Java等根据大图片生成一定尺寸的缩略图来供前台页面调用当然也有使用前台javascript脚本将加载后的大图强行缩放变成所谓的缩略图这种方法不可取。但是针对网站内容页如本站文章详情页如果需要加载一张很大的图片时为了防止“撑破”布局我们使用jQuery来等比例缩放图片。我们分两种情况来讲述1.已知图片尺寸 代码如下:div iddemo1img srca.jpg width800 height300 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_ww){//如果图片宽度超出容器宽度--要撑破了var height (w*img_h)/img_w; //高度等比缩放$(this).css({width:w,height:height});//设置缩放后的宽度和高度}});});2.未知图片尺寸当页面加载的图片尺寸未知的情况下上述代码则不能进行有效的缩放这种情况多出现在采集的外部链接图片。 代码如下:div iddemo2img srca.jpg alt图片/div所幸的是有好心朋友已经写出来专门的插件来处理而且跨浏览器解决了前端朋友们的一大难题。下面隆重介绍下autoIMG。autoIMG可以快速对文章图片进行尺寸自适应它利用浏览器获取图片文件头尺寸数据无需等待图片加载完成。autoIMG兼容Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | ...调用autoIMG插件方法相当简单 代码如下:$(function(){$(#demo2).autoIMG();}); 转载于:https://blog.51cto.com/unity3d168/1310026
