24Apr

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

时间: 2013-4-24 分类: PHP开发 作者:

TAGS:

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

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

这里的宽度不是固定的,不同的主题可能不同。
max-width: 600px: 代码中的这个部分针对Firefox/Opera浏览器,限制对象的最大宽度为600px。此代码对IE无用,为了让IE也能限制对象宽度,所以在代码中 加入第2行代码,用IE提供的expression命令,使所有图片的宽度自动缩小或放大至600px。”

之前这种方法一直用得很好,但是最近我在修改wordpress模板的时候,这段代码在IE8中,图片仅是宽度被缩放了,而高度仍旧不变,显得非常难看。
对于这个问题,有一个人给了我几个解决的方案:
方法一:在head中增加meta标签如下

  1. <META http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

方法二:CSS样式改变

  1. a img.aligncenter {
  2. display:block;
  3. margin-left:auto;
  4. margin-right:auto;
  5. max-width:700px;
  6. _width:expression(this.width<700px?"auto":"700px");
  7. }

方法三:在问题页面加入

  1. <script language="javascript" type="text/javascript">
  2. function changimgsize(){
  3. var imgs = document.getElementById("page").getElementsByTagName("img");
  4. var imgwidth=600;
  5. for(i=0; i <imgs.length; i++){
  6. if(imgs[i].width>imgwidth){
  7. var oW = imgs[i].width;
  8. var oH = imgs[i].height;
  9. var rate = oH/oW;
  10. imgs[i].width = imgwidth;
  11. imgs[i].height = imgwidth*rate;
  12. }
  13. }
  14. }
  15. window.onload=changimgsize;
  16. </script>

通过对比,发现旧模板正是比新模板多了一个如第一方案中的meta标签,在header.php中加入此标签,问题解决。至于方案二和方案三,未做测试,不知可行与否。

补充:对于 IE 8,如果不使用加 meta 标签的方法,那么就需要在第一个 CSS 样式中补充一个“width:auto;”,才能正常实现限制最大宽度的图片等比例缩放,即:

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

但是这样的做法,浏览器可能会无视 img 标签中设置的尺寸。

各种方法各有得失,大家相互比较吧~!

喜欢我们的文章请您与朋友分享:

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:泰山个人博客 >> IE8下等比例缩放 height高度不变的解决方法
本文地址:http://www.tais3.com/2013/757.html + 复制链接

相关文章:

Comments

目前有 0 条精彩评论

  1. 还没有任何评论,你来说两句吧

Comments
发表评论

电子邮件地址不会被公开。 * 标记为必填选项

  • 正确格式为: http://www.tais3.com