IE8下图片等比例缩放 HEIGHT高度不变的解决方法


一般来说,我们在做博客的时候经常用到图片等比例缩放的效果,一般我们都会用到下面的CSS:

max-width:600px;
width: expression(this.width > 600 ? "600px" : true);
height:auto;

这里的宽度不是固定的,不同的主题可能不同。
max-width: 600px: 代码中的这个部分针对Firefox/Opera浏览器,限制对象的最大宽度为600px。此代码对IE无用,为了让IE也能限制对象宽度,所以在代码中 加入第2行代码,用IE提供的expression命令,使所有图片的宽度自动缩小或放大至600px。”
之前这种方法一直用得很好,但是最近我在修改wordpress模板的时候,这段代码在IE8中,图片仅是宽度被缩放了,而高度仍旧不变,显得非常难看。
对于这个问题,有一个人给了我几个解决的方案:

方法一:在head中增加meta标签如下
<META http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

方法二:CSS样式改变

a img.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
max-width:700px;
_width:expression(this.width<700px?"auto":"700px");
}

方法三:在问题页面加入

<script language="javascript" type="text/javascript">
function changimgsize(){
var imgs = document.getElementById("page").getElementsByTagName("img");
var imgwidth=600;
for(i=0; i <imgs.length; i++){
if(imgs[i].width>imgwidth){
var oW = imgs[i].width;
var oH = imgs[i].height;
var rate = oH/oW;
imgs[i].width = imgwidth;
imgs[i].height = imgwidth*rate;
}
}
}
window.onload=changimgsize;
</script>

通过对比,发现旧模板正是比新模板多了一个如第一方案中的meta标签,在header.php中加入此标签,问题解决。至于方案二和方案三,未做测试,不知可行与否。
补充:对于 IE 8,如果不使用加 meta 标签的方法,那么就需要在第一个 CSS 样式中补充一个“width:auto;”,才能正常实现限制最大宽度的图片等比例缩放,即:

width:auto;
max-width:600px;
width: expression(this.width > 600 ? "600px" : true);
height:auto;

但是这样的做法,浏览器可能会无视 img 标签中设置的尺寸。
各种方法各有得失,大家相互比较吧~!

posted on 2015-04-02 12:11  bigdesign  阅读(2197)  评论(0编辑  收藏  举报