订阅本站

CSS控制图片等比例缩放

admin 发表于 2011-7-29 分类 知识口袋 | 发表评论

网页制作过程中经常遇到需要做特片等比缩放，并且需要控制尺寸在一定的范围内。一般有JS与CSS两种控制方法，在我看来用CSS控制相对简便一些。
IE7以上 FF等直接用 max-width与 max-height两个属性，IE6用expression，示例如下：

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>PIC</title>
  6. <script type="text/javascript">
  7. function ResumeError() { return true; }
  8. window.onerror = ResumeError; //屏蔽JS错误，这样状态栏就不会显示“网站上有错误了”
  9. </script>
  10.  
  11. <style type="text/css" >
  12. .album img {
  13. vertical-align: middle;
  14. max-width:100px;   /* FF IE7+ */
  15. max-height:100px; /* FF IE7+ */
  16. _width:expression(this.width>100&&this.width>this.height?100:auto); /* IE6 */
  17. _height:expression(this.height>100?100:auto); /* IE6 */
  18. }
  19. </style>
  20. </head>
  21.  
  22. <body>
  23. <div class="album">
  24.    <img src="pic_01.jpg" />
  25.    <img src="pic_02.jpg" />  
  26. </div>
  27. </body>
  28. </html>

无觅相关文章插件，快速提升流量