关于max-height和max-width的问题

2015-01-13 09:09
f和chrome都支持max-height和max-width

 

ie下不支持max-height和max-width。可以通过2种方式实现

 

1、css表达式方法:(简单有效,但渲染效率低,而且经常出现判断图片大小错误的问题,图片莫名其妙变小了)

_width:expression(this.width > 600 ? "600px" : this.width+"px");

 

2、javascript方法:(加载需要个过程,但是不容易出现上面的错误)。这里直接用jquery写



    //用 JS 设置图片的最大宽度  
    function setImgsMaxWidth()  
    {  
        $('.maximg600 img').each(function() {   
             var maxWidth = 600; // 图片最大宽度   
             var ratio = 0;  // 缩放比例   
             var width = $(this).width();    // 图片实际宽度   
             var height = $(this).height();  // 图片实际高度   
                  
             // 检查图片是否超宽   
             if(width > maxWidth){   
                 ratio = maxWidth / width;   // 计算缩放比例   
                 $(this).css("width", maxWidth); // 设定实际显示宽度   
                 height = height * ratio;    // 计算等比例缩放后的高度    
                 $(this).css("height", height);  // 设定等比例缩放后的高度   
             }            
                
        })  
    }   
    if (window.attachEvent)  
    {  
        window.attachEvent("onload", function(){  
            setImgsMaxWidth();  
        });  
    }  
只做宽度检测,高度和这个类似。并使用了监听器,只有当是ie时才用这段代码。


javascript写法,摘抄的,应该没问题


    // 用 JS 设置图片的最大宽度  
    function setImgsMaxWidth(containerId, maxWidth)  
    {  
        var container = document.getElementById(containerId);  
        if (!container)  
        {  
            return;  
        }  
          
        var imgs = container.getElementsByTagName("img");  
        for (var i = 0; i < imgs.length; i++)  
        {  
            if (imgs[i].width > maxWidth)  
            {  
                imgs[i].width = maxWidth;  
            }  
        }  
    }  
       
    if (window.attachEvent)  
    {  
        window.attachEvent("onload", function(){  
            setImgsMaxWidth("docContent", 600);  
        });  
    }  

^