网络编程
位置：首页>> 网络编程>> 网页设计>> 兼容 IE,Firefox 的图片自动缩放 CSS

兼容 IE,Firefox 的图片自动缩放 CSS

　　发布时间：2011-09-27 13:36:58　

标签：自动缩小,图片,兼容

方法一

  1. .Image {  

  2.     max-width:600px;height:auto;cursor:pointer;  

  3.     border:1px dashed #4E6973;padding: 3px;  

  4.     zoom:expr

    ession( function(elm) {  

  5.         if (elm.width>560) {  

  6.             var oldVW = elm.width; elm.width=560;  

  7.             elm.height = elm.height*(560 /oldVW); 

  8.         } 

  9.         elm.style.zoom = '1'; 

  10.     }(this));

  11. } 

方法二

.thumbImage {max-width: 100px;max-height: 100px;} /* for Firefox & IE7 */
* html .thumbImage { /* for IE6 */
width: expression(this.width > 100 && this.width > this.height ? 100 : auto);
height: expression(this.height > 100 ? 100 : auto);

 

方法三

<div id="pic"><img src=http://www.cidianwang.com/images/zidian_s.gif /></div>
<script language="javascript">
var cfg = {
 maxWidth  :  480,
 maxHeight  :  480
} ;

lstImg = document.getElementById('pic').getElementsByTagName('img');
for (var i = 0; i < lstImg.length; i++) {
 var tmpW, tmpH;
 var img = lstImg[i];
 tmpW = img.width;
 tmpH = img.height;
 if (tmpW > cfg.maxWidth && tmpH > cfg.maxHeight) {
  if (tmpW / cfg.maxWidth > tmpH / cfg.maxHeight) {
   img.width = cfg.maxWidth;
   img.height = cfg.maxHeight * (cfg.maxWidth / tmpW);
  }
 }
 else {
  if (tmpW > cfg.maxWidth) {
   img.width = cfg.maxWidth;
   img.height = cfg.maxHeight * (cfg.maxWidth / tmpW);
  }
  else if (tmpH > cfg.maxHeight) {
   img.height = cfg.maxHeight;
   img.width = cfg.maxWidth * (cfg.maxHeight / tmpH);
  }
 }
}

</script>

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com