请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

CSS中强制等比例缩放图片

CSS等比例缩小图片,实用性较强的一个CSS技巧,等比例一般都是在我们规定的高度或宽度超出范围时候,另图片以高或宽为基准按比例缩小或放大,这样保证网页布局的整齐性,这也是CSS功能的强大之处。不过本处是CSS调用了expression,也就是说用CSS调用了JavaScript,有点不爽。

  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. <title>css等比例缩小图片</title>
  4. <head>
  5. <style type="text/css">
  6. <!--
  7. body {
  8. text-align: center;
  9. margin: 20px auto;
  10. padding: 0px;
  11. font-size:14px;
  12. color:red
  13. }
  14. #pic{
  15.   margin:5px auto;
  16.   width:500px;
  17.   padding:0;
  18.   border:1px solid #333;
  19.   }
  20. #pic img{
  21. max-width:200px;
  22. width:expression(document.body.clientWidth > 200?"200px":"auto" );
  23. display:block;
  24. border:0
  25. }

  26. -->
  27. </style>
  28. </head>
  29. <body>将宽度强制为200px后图片高度被等比例缩小
  30. <div id="pic">
  31. <a href="#"><img src="a.jpg" /></a>
  32. </div>
  33. 原图:
  34. <br />
  35. <img src="a.jpg" />
  36. </body>
复制代码



回复

使用道具 举报

大神点评2

William 2014-3-8 23:10:57 显示全部楼层
还是找不到后台使用方法
回复 支持 反对

使用道具 举报

kaneshii 2014-9-22 16:57:07 显示全部楼层
使用方法很少啊
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

    热门帖子
  • 精华
  • 新帖
快速回复 返回顶部 返回列表