1、第一种方法:根据图片外面容器宽度来设置图片宽和高。
var w = $("#demo1").width(); //图片外层容器宽度
$("#demo1 img").each(function() { //若多个图片
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、第二种方法:通过jQuery.autoIMG.min.js来使所在区域的图片自适应。
$("#demo2").autoIMG();//插件自动设置图片宽高 值得一提的是,当页面加载的图片尺寸未知的情况下,用该插件利用浏览器获取图片文件头尺寸数据,无需等待图片加载完成。当然你还可以用CSS中的overflow:hidden 来控制显示,真正的缩放还是要靠js来实现的。
*
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接:



聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6
Copyright(C)web.com, All Rights Reserved.
