七零部落格
思则大道至简,疑则谜团重重!
思则大道至简,疑则谜团重重!
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); }); }