源于生活

标题: HTML代码-让你的div内的图片自适应大小-装哔不是一瞬间 [打印本页]
作者: kevin-ying    时间: 2015-9-5 02:16
标题: HTML代码-让你的div内的图片自适应大小-装哔不是一瞬间
这代码实现的功能就是平常我们遇到的一个div里面包含img的时候，在img图片大小未知，div大小未知的情况下，让图片自适应大小，对于图片本身小于div容器大小时，不作处理。因为如果拉伸，图片可能就失真了。

废话不多说，直接上代码，已测试，兼容火狐，谷歌，IE6，IE7/8

以下是js代码：
  1. <script type="text/javascript" language="javascript">
  2. window.onload=function(){
  3. changeImgSize();
  4. }
  5. function changeImgSize(){
  6. var getContainer=document.getElementById('imgcontainer');
  7. var getIMG=getContainer.getElementsByTagName('img')[0];
  8. var fw=getContainer.offsetWidth-(2*getContainer.clientLeft);
  9. var fh=getContainer.offsetHeight-(2*getContainer.clientTop);
  10. var iw=getIMG.width;
  11. var ih=getIMG.height;
  12. var m=iw/fw;
  13. var n=ih/fh;
  14. if(m>=1&&n<=1)
  15. {
  16. iw=Math.ceil(iw/m);
  17. ih=Math.ceil(ih/m);
  18. getIMG.width=iw;
  19. getIMG.height=ih;
  20. }
  21. else if(m<=1&&n>=1)
  22. {
  23. iw=Math.ceil(iw/n);
  24. ih=Math.ceil(ih/n);
  25. getIMG.width=iw;
  26. getIMG.height=ih;
  27. }
  28. else if(m>=1&&n>=1)
  29. {
  30. getMAX=Math.max(m,n);
  31. iw=Math.ceil(iw/getMAX);
  32. ih=Math.ceil(ih/getMAX);
  33. getIMG.width=iw;
  34. getIMG.height=ih;
  35. }
  36. if(getIMG.height<fh)
  37. {
  38. var getDistance=Math.floor((fh-getIMG.height)/2);
  39. getIMG.style.marginTop=getDistance.toString()+"px";
  40. }
  41. }
  42. </script>
复制代码
以下是html代码：
  1. <div class="sy_pic" id="imgcontainer"><img src="images/444.jpg" /></div>
复制代码

以下是css代码：
  1. .sy_pic{ width:200px; height:300px; border:#000 solid 5px; text-align:center;}
复制代码
(已测试，兼容火狐)

作者: kevin-ying    时间: 2015-9-5 02:34
我们（特别是像我一样的菜鸟）经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量。
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft（没有它就不必有这么啰嗦的代码了^_^）。本人仅在ie6.0,ff1.5,opera7.0于winXP下测试通过，希望通过此篇文章抛砖引玉，望更多高手指点。关键在于：max-width:780px;以及下面那行。

百分比适应:

  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=utf-8" />
  5. <title>css2.0 by:kevin-ying HTTP://WWW.KEVIN-YING.COM</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9.         font-size: 12px;
  10.         text-align: center;
  11.         margin: 0px;
  12.         padding: 0px;
  13. }
  14. .pic{
  15.   margin:0 auto;
  16.   width:31%;
  17.   float:left;
  18.   padding:0;
  19.   overflow:hidden;
  20.   margin:1%;
  21.   padding-bottom:5px;
  22.   }
  23. .pic img{
  24.     max-width:90%;
  25.         width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "90%": "auto" );
  26.         -moz-box-shadow:5px 5px #ccc;
  27.      -webkit-box-shadow:5px 5px #ccc;
  28.      box-shadow:5px 5px #ccc;
  29.         }
  30. -->
  31. </style>
  32. </head>
  33. <body>
  34. <div class="pic">
  35. <img src="http://pc.duowan.com/uploads/allimg/2011-08/29092S9-6-21409.jpg" alt="被我盗链的图片！"/>
  36. </div>
  37. <div class="pic">
  38. <img src="http://www.9yaocn.com/attachments/201412/05/13/faiojup86.jpg" alt="被我盗链的图片！"/>
  39. </div>
  40. <div class="pic">
  41. <img src="http://www.sj88.com/attachments/bd-aldimg/1205/124/17.jpg" alt="被我盗链的图片！"/>
  42. </div>
  43. <div class="pic">
  44. <img src="http://img5.duitang.com/uploads/item/201408/02/20140802145747_GH8rH.thumb.700_0.jpeg" alt="被我盗链的图片！"/>
  45. </div>
  46. </body>
  47. </html>
复制代码

固定像素:
  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=utf-8" />
  5. <title>css2.0 by:kevin-ying HTTP://WWW.KEVIN-YING.COM</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9.         font-size: 12px;
  10.         text-align: center;
  11.         margin: 0px;
  12.         padding: 0px;
  13. }
  14. #pic{
  15.   margin:0 auto;
  16.   width:600px;
  17.   padding:0;
  18.   border:1px solid #333;
  19.   }
  20. #pic img{
  21.     max-width:600px;
  22.         width:expression(document.body.clientWidth > 600? "600px": "auto" );
  23.         border:1px dashed #000;
  24.         }
  25. -->
  26. </style>
  27. </head>
  28. <body>
  29. <div id="pic">
  30. <img src="http://pc.duowan.com/uploads/allimg/2011-08/29092S9-6-21409.jpg" alt="被我盗链的图片！"/>
  31. </div>
  32. </body>
  33. </html>
复制代码

作者: kevin-ying    时间: 2015-9-5 02:44
再来一个:
固定高度:
  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=utf-8" />
  5. <title>css2.0 by:kevin-ying HTTP://WWW.KEVIN-YING.COM</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9.         font-size: 12px;
  10.         text-align: center;
  11.         margin: 0px;
  12.         padding: 0px;
  13. }
  14. .pic{
  15.   margin:0 auto;
  16.   width:31%;
  17.   height:220px;
  18.   float:left;
  19.   padding:0;
  20.   overflow:hidden;
  21.   margin:1%;
  22.   padding-bottom:5px;
  23.   }
  24. .pic img{
  25.     max-height:90%;
  26.         width:expression(document.body.clientWidth>document.getElementById("pic").scrollheight*9/10? "90%": "auto" );
  27.         -moz-box-shadow:5px 5px #ccc;
  28.      -webkit-box-shadow:5px 5px #ccc;
  29.      box-shadow:5px 5px #ccc;
  30.         }
  31. -->
  32. </style>
  33. </head>
  34. <body>
  35. <div class="pic">
  36. <img src="http://pc.duowan.com/uploads/allimg/2011-08/29092S9-6-21409.jpg" alt="被我盗链的图片！"/>
  37. </div>
  38. <div class="pic">
  39. <img src="http://www.9yaocn.com/attachments/201412/05/13/faiojup86.jpg" alt="被我盗链的图片！"/>
  40. </div>
  41. <div class="pic">
  42. <img src="http://www.sj88.com/attachments/bd-aldimg/1205/124/17.jpg" alt="被我盗链的图片！"/>
  43. </div>
  44. <div class="pic">
  45. <img src="http://img5.duitang.com/uploads/item/201408/02/20140802145747_GH8rH.thumb.700_0.jpeg" alt="被我盗链的图片！"/>
  46. </div>
  47. <div class="pic">
  48. <img src="http://www.sj88.com/attachments/bd-aldimg/1205/124/17.jpg" alt="被我盗链的图片！"/>
  49. </div>
  50. <div class="pic">
  51. <img src="http://www.9yaocn.com/attachments/201412/05/13/faiojup86.jpg" alt="被我盗链的图片！"/>
  52. </div>
  53. </body>
  54. </html>
复制代码







欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1