您现在所在的位置：首页 > 点点滴滴学技术 > DIV+CSS让图片自适应层宽度
《DIV+CSS让图片自适应层宽度》
2009/6/3 23:27:07
Tags: DIV, CSS, 自适应

做RC4.0皮肤的时候因为原有的脚本突然失效，对于脚本不太好的我来讲，搞了很久也没有解决问题，不能使用特效还是小事，麻烦的是，日志中的图片一旦超过了层的尺寸就会溢出，用overflow的属性来定义，又不太好，毕竟是机械的裁切隐藏掉了，并非按比例显示出来，后来努力在网上搜索了一些方法，发现一种比较好用的，一来做个记录，而来帮助需要的朋友。以下举个例子先：

例如：

  1. <style type="text/css"> 
  2. <!--  
  3. #text {  
  4.     width:630px;  
  5.     float:left;  
  6. }  
  7. --> 
  8. </style> 
  9. </head> 
  10.  
  11. <body> 
  12. <div id="text"> 
  13.     <p><img alt="" src="/Attach/Matter/200906/633796660246438250_1.jpg" /></p> 
  14. </text> 
  15. </body> 
  16. </html> 

像以上情况的话，图片一旦超过了630PX，要么图片浮出层，要么把层撑变形，我们更不能死板的要求用户完全按照你限定的尺寸上传图片，这样就需要对显示随机图片的区域进行定义，以往的解决方法就是加入脚本，配合CSS来限制图片的尺寸，但是对于纯粹的美工来讲，多少麻烦一些。那就自然用到CSS了。如果用OVERFLOW来定义溢出的话，图片也是仅仅被切割隐藏了，效果不佳。在网上搜索后得到一个方法，就是样式中加入以下代码：

 
  1. max-width:630px; width:expression(document.body.clientWidth > 630? "630px": "auto" ); 

可是加了之后却发现一个问题，网页中的所有图片都被拉成了630px；惨不忍睹啊，但后来一想既然可以判别大于，应该也可以判别小于，所以更改代码如下：

  1. <style type="text/css"> 
  2. <!--  
  3. #text {  
  4.     width:630px;  
  5.     float:left;  
  6. }  
  7. #text img {  
  8.     max-width:600px;   
  9.     width:expression(document.body.clientWidth > 600? "600px": "auto");  
  10.     width:expression(document.body.clientWidth < 600? "auto": "auto");  
  11. }  
  12. --> 
  13. </style> 
  14. </head> 
  15.  
  16. <body> 
  17. <div id="text"> 
  18.     <p><img alt="" src="/Attach/Matter/200906/633796660246438250_1.jpg" /></p> 
  19. </text> 
  20. </body> 
  21. </html> 

这样一来，样式表告诉浏览器，图片的最大尺寸不要超过600px,如果超过了，那么最大宽度为600，高度自动，如果小于600，那么高度和宽度全部自动，也就是按照原有尺寸来显示了。问题解决了。

根据这些东西，衍生了解一些东西，IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 给元素固有属性赋值 例如，你可以依照浏览器的大小来安置一个元素的位置。

  1. #myDiv {  
  2. position: absolute;  
  3. width: 100px;  
  4. height: 100px;  
  5. left: expression(document.body.offsetWidth - 110 + "px");  
  6. top: expression(document.body.offsetHeight - 110 + "px");  
  7. background: red;  
  8. } 

这里只是举了一个例子，某些时候，这样的做法可以解决不少问题，当然还是需要有一点JS的支持，起码方法属性要有所了解才行。当然了，话又说了回来，毕竟是脚本的东西，所以能够通过其他手段解决的时候，尽量不要使用expression，会占用客户端很多的资源。

本站所有文章均为原创或整理原创，欢迎转载，但请注明出处给予链接，并且不得删除文章中标识的引用出处，谢谢，让我们创建良好的互联网氛围，尊重作者的劳动成果！

文章看完了？留个脚印再走吧

获取引用通告地址 | 点点滴滴学技术RSS
上一篇: 河北省张家口（北京）至浙江省宁波市余姚市路书
下一篇：长大以后你想做什么
所属分类: [ 点点滴滴学技术 ] | 发表评论 | 浏览: 1177
本文相关文章
  • 来了就不要吝啬了，欢迎在下边发表评论哦！
  • 称呼： * (您的姓名)
  • 电邮： * (邮箱地址)
  • 网址：
  • 内容：
******公司