DIV+CSS让图片自适应层宽度 - 指北针—

《DIV+CSS让图片自适应层宽度》

2009-06-03 23:27:07

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

例如：

<style type="text/css"> 
<!--  
#text {  
    width:630px;  
    float:left;  
}  
--> 
</style> 
</head> 
 
<body> 
<div id="text"> 
    <p><img alt="" src="/Attach/Matter/200906/633796660246438250_1.jpg" /></p> 
</text> 
</body> 
</html>

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

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

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

<style type="text/css"> 
<!--  
#text {  
    width:630px;  
    float:left;  
}  
#text img {  
    max-width:600px;   
    width:expression(document.body.clientWidth > 600? "600px": "auto");  
    width:expression(document.body.clientWidth < 600? "auto": "auto");  
}  
--> 
</style> 
</head> 
 
<body> 
<div id="text"> 
    <p><img alt="" src="/Attach/Matter/200906/633796660246438250_1.jpg" /></p> 
</text> 
</body> 
</html>

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

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

#myDiv {  
position: absolute;  
width: 100px;  
height: 100px;  
left: expression(document.body.offsetWidth - 110 + "px");  
top: expression(document.body.offsetHeight - 110 + "px");  
background: red;  
}

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

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

订阅此篇文章的最新评论 | 获取引用通告地址

上一篇：发布一个ROCLOG4.0的皮肤

下一篇：长大以后你想做什么

所属分类: [ 点点滴滴学技术 ] | 评论: [ 0 ] | 浏览: [ 485 ] | 作者: 帅豆

本文相关文章