创建博客 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网络营销设计联盟

勤奋创造奇迹,知识改变命运!

 
 
 

日志

 
 

解决图片太大溢出问题、CSS 限制图片最大宽度、图片按比例自动缩放  

2010-06-29 13:31:12|  分类: div与css浏览器兼 |  标签: |举报 |字号 订阅

我们在制作一个网页的时候,经常要对一个区域里可能出现的图片的宽度进行限制,不然它可能会把页面撑得很烂很烂。
如果你采用固定宽度,长度来设置的话,比如在

<img height="200px" width="200px"
中设置,或者是在CSS中用

.img {height:200px;width:200px;}
来控制,不同规格的图片有可能会变形。这是一种最蠢的方法。经过摸索,我找到一串CSS代码,可以让图片在超过规定的宽度时,自动缩小,并且是按比例缩小,不会造成图片变形。如下:


.img{
max-width: 200px;
height:auto;
兼容IE、Firefox
img { max-width:200px; max-height:200px; }
*html img { width: expression(this.width > 200 && this.width > this.height ? 200 : auto); height: expression(this.height > 200 ? 200 : auto); } IE7 FF支持max-width/max-height,IE6不支持,FF不支持expression,IE支持}
 

经过测试,这串CSS代码能兼容IE6 IE7 FF。

expression这个方法虽然好,但是却非常消耗浏览器的资源,很多时候页面打开都无法正常浏览图片,还需要刷新页面也可以正常显示,在痛苦的挣扎了很久后,决定放弃。除了CSS外,我们还有JS嘛,于是接着到处搜索可用的js代码,接下来使用了类似如下的图片的直接缩图的方法,

<img border="0" src="图片路径" onload="javascript:if(this.width>500)this.width=500" />
这样可是虽然也可以实现缩图的效果,但是如果图片很大,页面还是会先被撑破,再缩小,效果也不理想。接下来使用了很多网上提供的各种js代码,不是效果很差就是无法兼容多个浏览器,实在没办法,还是自己研读程序,看看有什么办法。结果发现,最后的实现居然非常简单。
实现思路很简单,改造js代码,既然图片很大,那么我们先用最经典的限制width的方法限制大图的宽度,但是小图怎么办?小图我们用onload的方法再缩小,就这么搞定了。完美代码如下:

对应的JS代码:

<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
   if(image.width>0 && image.height>0){
   flag=true;
   if(image.width>650){
   }else{
   ImgD.width=image.width;
   ImgD.height=image.height;
   }
   }
}
//-->
</script>
对应的HTML代码:

<img border=0 src="图片路径" onload="javascript:DrawImage(this);" width="650" />
附其他方法供参考:
1、用鼠标拖动来改变大小
以下是代码片段:

<script LANGUAGE="JavaScript">
function resizeImage(evt,obj){
newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
</script>
<img src="7say.gif" ondrag="resizeImage(event,this)">
2、用鼠标滚动控制图片大小
以下是代码片段:

<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;">
3、图片标签里用代码控制大小
以下是代码片段:

<img border="0" src="[!--picurl--]" onload="if(this.width>screen.width-500)this.style.width=screen.width-500;">
4、CSS控制图片大小
1. css2直接实现 (IE暂不支持):

img{max-width: 500px;}
2. expression实现(IE only):

img{width:expression(width>500?"500px":width);}
3. 使用js. 方法: 用 document.getElementsByTagName(”IMG”) 的方法取得全部img元素 遍历img元素 判断其宽度并做相应操作

  评论这张
 
阅读(1891)| 评论(0)
|      
推荐 转载

历史上的今天

最近读者

热度

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2014