图片自适应大小宽高的多种方法

chunfa在WordPress theme-Thursday’s women中提到关于图片自适应大小的问题，大多数WP主题都这样，当图片的宽超出父层的时候，就会把页面撑开，很不美观。我搜寻了一些方法，现归纳一下：

1. 发布文章时，在后台直接Resize，生成理想的宽高比缩略图。
   这个，地球人应该都知道。可是太麻烦，而且对于wordpress用户来说，无数新鲜出炉精美无比的主题，总让人忍不住换，换，换！
2. 用Overflow:hidden属性直接隐藏溢出部分。
   这种方法是最简单的，但对追求的完美的人来说还不妥。毕竟，伤心费神发布的图片，最后呈现在观众面前的却是个半尸体，多少让人有点难过。
3. 用max-width(最大宽度)和调用expression(针对IE6)。
   如果没有IE6这个早该下岗的家伙，那这无疑是最好的解决方法了。这是CSS中的最大宽度属性，firefox，IE7和Opera都支持，但唯独IE6不支持，摆明的跟着W3C耍脾气。还好IE6有不少扩展，其实有一个就是expression, 通过这个CSS扩展，就可以让IE6同样实现图片的自定义宽高。下面是我现在使用的主题对日志页内的图片的宽高比示例：

   
   
   .entry a img,.entry img,{border:none;max-width : 460px; width:expression (
   
   function(img){
   
   img.onload=function(){
   
   this.style.width = '';
   
   this.style.width = (this.width > 460)?"460px":this.width+"px"
   
   };
   
   return '120px'  //加载时显示宽度为120px
   
   }(this)
   
   );  }

4. expression虽然方便，但最大的缺陷就是，如果一个页面中的图片过多，那expression语句就会被不断的调用，非常耗费访问者的内存，所以，一位达人给出的一个JS解决方法如下：我不懂JS。但看这段代码，好像是需要给每张图片都指定ID，这样的话，就要想办法让图片自动插入ID（总不可能手动插入吧，那还不成了聪明反被聪明误，偷懒反被懒来偷）。哎。烦。所以，我也没仔细研究，使用的仍然是第三种方法。如果你比较精通JS，那可以试试。
   1.<script> var imageArr=document.getElementById(controlID);  var imageRate =
   2.imageArr.offsetWidth / imageArr.offsetHeight;if(imageArr.offsetWidth > maxWidth) {  3.imageArr.style.width=maxWidth + “px”;  imageArr.style.Height=maxWidth / imageRate + “px”;  }
   4.if(imageArr.offsetHeight > maxHeight)  {    imageArr.style.width = maxHeight * imageRate + 6.”px”; imageArr.style.Height = maxHeight + “px”;  }
   7.</script>

来源于 图片自适应大小宽高的多种方法 | 帕兰映像