技术相关 · 2014年9月7日

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

方法一

.Image {  
    max-width:600px;height:auto;cursor:pointer;  
    border:1px dashed #4E6973;padding: 3px;  
    zoom:expression( function(elm) {  
        if (elm.width>560) {  
            var oldVW = elm.width; elm.width=560;  
            elm.height = elm.height*(560 /oldVW); 
        } 
        elm.style.zoom = '1'; 
    }(this));
} 

方法二

.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://xxxxx.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>