msgbartop
世界上没有老实人,所谓的老实人是用来欺骗像我这样老实的人!
msgbarbottom

24 5月 11 css、js控制图片大小不溢出模板

2011年5月24日发表于Int.Ru | 共有:0 人评论

前面午夜客写过关于WORDPRESS中控制图片溢出自动缩小,具体见:http://wyk.int.ru/4301

有时在IE6中,有些代码IE6不能成功识别运行。

下面是一个比较有效解决IE6不兼容的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; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。

如果感觉用CSS太过于麻烦,可以直接使用javascript限制图片大小并自动缩放。

实现效果:所有指定ID(fontzoom)内的IMG图片无论是用HTML还是内联指定过width,HEIGHT的,全部自动判断,超过JS指定宽度的,自动缩放,不超过的不变。

经测试,IE6.0/7.0./8.0、 FIREFOX3.0下通过!

function autoResizepic()

{

var picTarget=document.getElementById(“fontzoom”).getElementsByTagName(“img”);

if(picTarget){

if(picTarget[0].width>600){

picTarget[0].height=picTarget[0].height*600/picTarget[0].width;picTarget[0].width=600;

}

 

if(parseInt(picTarget[0].style.width)>600){

picTarget[0].style.height=parseInt(picTarget[0].style.height)*600/parseInt(picTarget[0].style.width);picTarget[0].style.width=600+”px”;

}

}

}

原文地址:http://fav100.info/archives/4121/ 午夜客整理!

您的留言

*