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

ff和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);
    });
}