让IE6也能智能控制图片最大宽、高度

当一个图片的宽度或高度超出了容器时,我们一般会用max-width或max-height来设置其最大宽、高度,让图片不会超出容器,但是如果同时设置了最大高度和最大宽度时,有可能会造成图片最终显示会有些变型,就是说改变了图片原本的宽高比。

先抛开这个问题不说,单单让IE6也实现类似的效果就要费不少功夫,又不甘心用JS来实现,于是找了expression加hack类来实现:

比如说,我想设置一个图片最大宽度为800px,最大高度为600px,在IE6下可以这样:

.ie6 .box img{
_ie6max : expression(this.offsetHeight>600||this.offsetWidth>800 ? ((this.offsetHeight/this.offsetWidth<0.75)?this.style.width="800px":this.style.height="600px") : "");
}


这段expression还可以解决图片因最大高度和宽度限制而比例失调的问题。

 

posted @ 2015-07-03 14:57  木易宇飞  阅读(137)  评论(0编辑  收藏  举报