前往顾页
以后地位: 主页 > 收集编程 > Jsp实例教程 >

操纵css或js节制图片自适应代码

时候:2011-11-30 22:59来源:知行网www.zhixing123.cn 编辑:麦田守望者

图片主动适应年夜小是一个非经常常利用的服从,在进行制作的时候为了不图片撑开容器而对图片的尺寸进行需求的节制,我们可不成以用CSS节制图片使它自适应年夜小呢?

此小我博客想到了一个比较简朴的处理体例,固然不是非常的完美,如果您的请求不是非常高,已可以满足你的需求了。我们看下面的代码

div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?”600px”:”auto”);
overflow:hidden;
}

max-width:600px; 在IE7、FF等其他非IE浏览器下最年夜宽度为600px。但在IE6中有效。
width:600px; 在所有浏览器中图片的年夜小为600px;
当图片年夜大年夜于600px,主动减少为600px。在IE6中有效。
overflow:hidden; 超出的部分埋没,避免节制图片年夜小失败而引发的撑开变形。

========================================================

如果想设定图片的高度和宽度都不超越某一个牢固值,就需求在图片高度或宽度超越这个值的时候,让图片按比例减少到这个尺寸。

1,对当代浏览器,比如Firefox或是IE7及以上,直接利用max-width和max-height两条CSS属性便可。

2,对IE 6.0及以下版本,以上两条CSS属性均不会被理睬。之前措置这类事情,我们常常会借助Javascript,然后为图片加上onload事件。比方:
<imgsrc=”…”alt=”…”onload=”resizeImage(this)”/>
<script type=”text/javascript”>
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>
 

------分开线----------------------------
标签(Tag):Javascript javascript实例教程 JavaScript源代码 javascript教程
------分开线----------------------------
保举内容
猜你感兴趣