设为首页收藏本站关注微信<<< 抵制 IE6 人人有责 >>>
开启辅助访问 切换到窄版
搜索
热搜: 活动 交友 discuz
返回列表 发新帖
查看: 2412|回复: 2
打印 上一主题 下一主题

[WEB前端] HTML代码-让你的div内的图片自适应大小-装哔不是一瞬间

[复制链接]
kevin-ying
跳转到指定楼层
楼主
发表于 2015-9-5 02:16:37 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
这代码实现的功能就是平常我们遇到的一个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;}
复制代码
(已测试，兼容火狐)

自适应

本帖被以下淘专辑推荐:

  • · 常用|主题: 22, 订阅: 0
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享淘帖1

相关帖子
回复

使用道具 举报

kevin-ying
沙发
 楼主| 发表于 2015-9-5 02:34:00 | 只看该作者
我们（特别是像我一样的菜鸟）经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的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:09 | 只看该作者
再来一个:
固定高度:
  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>
复制代码



回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|手机版|Archiver|源于生活(个人生活娱乐工作的笔记)css3,html5,学习笔记    

GMT+8, 2024-11-23 22:47 , Processed in 0.109200 second(s), 30 queries .

Powered by Mr.Kevin-ying

© 2004-2015

快速回复 返回顶部 返回列表