MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » 纯CSS无表达式实现图片等比缩放(支持IE7及以下)

纯CSS无表达式实现图片等比缩放(支持IE7及以下)

www.MyException.Cn  网友分享于:2013-03-01  浏览:16次
纯CSS无表达式实现图片等比缩放(支持IE7及以上)

在制作网页的时候,常常会遇到一种情况,我们需要把一些未知尺寸的图片放在一个固定宽高的容器中,这时候我们需要考虑这样的问题:

  1. 只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小。
  2. 给图片设置固定的宽高可能导致图片变形。

有些人可能会简单地用JavaScript解决:

  1. <img src="image-url.png" onload="if(this.width > 100){this.width = 100;}if(this.height > 100){this.height = 100;}" />

但在这种写法在图片长宽差距较大时还是会出现图片变形的情况,优化了缩放算法的代码如下:

  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>JavaScript实现图片等比缩放</title>
  6. </head>
  7. <body>
  8.         <script type="text/javascript">
  9.                 function resize(element, maxWidth, maxHeight){
  10.                         if(element.width > maxWidth || element.height > maxHeight){
  11.                                 if(element.width / element.height > maxWidth / maxHeight){
  12.                                         element.width = maxWidth;
  13.                                 }else{
  14.                                         element.height = maxHeight;
  15.                                 }
  16.                         }
  17.                 }
  18.         </script>
  19.         <img src="image-url.png" onload="resize(this, 100, 100);" />
  20. </body>
  21. </html>

而在不考虑IE6的情况下,可以直接使用CSS来实现,而且不需要使用低性能的CSS表达式:

  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>纯CSS无表达式实现图片等比缩放</title>
  6.         <style>
  7.                 .box{
  8.                         width: 300px;
  9.                         height: 300px;
  10.                         text-align: center;
  11.                         border: 1px solid #ccc;
  12.                 }
  13.                 .box img{
  14.                         max-width: 100%;
  15.                         max-height: 100%;
  16.                         width: auto;
  17.                         height: auto;
  18.                 }
  19.         </style>
  20. </head>
  21. <body>
  22.         <div class="box"><img src="image-url.png" alt=""></div>
  23. </body>
  24. </html>




=======================签 名 档=======================

原文地址(我的博客):http://www.clanfei.com/2013/02/1700.html
欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================




2楼ccssddnnbbookkee6分钟前
很好,谢谢
1楼foundare_2022小时前
围观nn方蝶SP2010

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有