图片宽高不能自适应一直是IE6令人头疼的bug。对于一些内容不可控的容器,如论坛帖子正文,必需事先对容器做好设置,防止过大宽图片冲破容器。首先帖出html和css:
![大众](images/VW.jpg)
![宝马](images/BMW.jpg)
![奥迪](images/Audi.jpg)
在所有ie6以外的浏览器,只要定义好图片的max-width值,并将height设成auto,即可实现图片的等比例缩放了。
.contain{width:400px; border:1px solid #F00;overflow:hidden}
img{border:none;height:auto;max-width:400px}
用js实现图片等比例自适应的原理是:
公式: 图片真实宽度(imgWidth) 图片允许的最大宽度(maxWidth) ——————————— = ——————————————————————— 图片真实高度(imgHeight) 图片允许的最大宽度此时图片的高度(maxHeight) 所以推导出: maxHeight =maxWidth * imgHeight / imgWidth所以js部分应该这么写:
$(document).ready(function(){
var maxWidth = $(".contain").width();//找到容器的宽度,图片的最大宽度不能比这大,否则就撑破了
$("img").each(function(){
if(!$.support.style&&$.browser.msie&&($.browser.version==6.0)){//为了提高效率,代码只在ie6下才运行js判断。
var imgWidth = $(this).width();//获得容器内每张图片的宽
var imgHeight = $(this).height();//获得容器内每张图片的高
var maxHeight = maxWidth*imgHeight/imgWidth;//等比例绽放之关键:计算图片压缩后的高度
if(imgWidth > maxWidth){//判断图片的宽度,如果图片比容器宽才执行缩放,如果比容器小则显示原始尺寸
$(this).css("width",maxWidth).css("height",maxHeight);
}
}
});
});
查看实例
由于图片大小缩放可能在很多页面里都会使用,所以可以把这个封装成一个插件
$.fn.imgAuto = function(maxWidth){
var imgWidth = this.width();
var imgHeight = this.height();
var maxHeight = maxWidth*imgHeight/imgWidth;
if(imgWidth > maxWidth){
this.css("width",maxWidth).css("height",maxHeight);
}
return this;
}
在具体图片的地方只要调用
$("img") .each(function(){
$(this).imgAuto(200);//200为图片最大允许的宽度
})
查看实例