DIV+CSS 布局学习 记录 之 图片缩放DIV+CSS 2009-03-13 23:40:46 阅读262 评论0 字号:大中小 .
在做布局的时候发现一个问题。
例如说3列流体布局。中间一列是放置文章位置的地方,里面有图片,但是一但文章里的图片宽度过大,超过定义的DIV层的宽度,那么整个页面就会变形,中间的DIV会跑到其他地方,比如最下方。
找过几种方法,发现一种很实用,但是我没有在CSS2.0的帮助文档中找到出处,可能是缩减了。
第一种方法:通过JS的办法控制IMG图片大小,用JS做判断,超过指定大小就会重新设置此图片的大小。
此方法麻烦,而且还必须要调用在当前 this的图片上,才会出效果。-----不是我们想要的,PASS掉。。
第二种方法:通过直接定义DIV里的图片大小完成,如
#testimg img
{
width:500px;/*假如你的DIV宽度是510,我们把图片设置为500PX大小*/
}
<div id="testimg"><img src="123.img" alt="测试超大图缩放"></img></div>
这种方法虽然可以将大图缩放到500宽度(光定义宽度,高度就会自动同比例缩小),但出现一个问题,就是小图也会放大,出现失真,当然这是不被允许的。。。。不是我们要的--PASS掉!
第三种方法,是在第二种方法的基础上
#testimg img
{
width:expression(document.body.clientWidth>500?"500px":"auto");
/*假如你的在此DIV层下包含的图片宽度超过了500PX,则将图片宽度设置为500px大小,高度会自动同比例缩小*/
}
<div id="testimg"><img src="123.img" alt="测试超大图缩放"></img></div>
结果是,没有超过500px的小图会显示真实大小,但超过500px的图则会缩小到500px.
注意:能不使用expression就不要使用,一般不建议使用expression,因为expression对浏览器资源要求比较高。
也不符合web标准化设计并且不被火狐,Opera等浏览器支持。
----------------------------------------
所以目前纯用CSS的方式控制自动缩放图片的方法还是没找到一个好的。
------------------------------------------------
在网上找啊找找啊找,终于。。找到即支持IE6,又支持FF的完美图片自动缩放的控制语句,我真菜。。。写不出来,可能才看了几天CSS的缘故。。。还是自己太笨,说不清楚。。
代码如下!~~
=======================
.img
{
max-width:458px;
height:auto;
cursor:pointer;
border:1px double #4E6973;
padding: 4px;
zoom:expression( function(elm)
{ if (elm.width>458)
{ var oldVW = elm.width; elm.width=458;
elm.height = elm.height*(458 /oldVW);
} elm.style.zoom = '1';
}
(this));
}
======================
原创作者是的BLOG地址是:
http://achro.blog.163.com/blog/static/22121912009213114046617/
很感谢~
[size=large][color=red][b]还有一种方法[/b][/color][/size]
pictureDiv.innerHTML="<p id='pv'><img src='"+fileName+"' id='imgshowing' border=\"1\" οnlοad=\"resizeImage(this)\"/></p>" ;//图片垂直居中
//调整图片的大小
function resizeImage(object){
if (object.width>=480){
var picwidth= object.width;
object.width=480;
object.height=object.height*480/picwidth;
if(object.height>384)
object.height=384;
}
}
在做布局的时候发现一个问题。
例如说3列流体布局。中间一列是放置文章位置的地方,里面有图片,但是一但文章里的图片宽度过大,超过定义的DIV层的宽度,那么整个页面就会变形,中间的DIV会跑到其他地方,比如最下方。
找过几种方法,发现一种很实用,但是我没有在CSS2.0的帮助文档中找到出处,可能是缩减了。
第一种方法:通过JS的办法控制IMG图片大小,用JS做判断,超过指定大小就会重新设置此图片的大小。
此方法麻烦,而且还必须要调用在当前 this的图片上,才会出效果。-----不是我们想要的,PASS掉。。
第二种方法:通过直接定义DIV里的图片大小完成,如
#testimg img
{
width:500px;/*假如你的DIV宽度是510,我们把图片设置为500PX大小*/
}
<div id="testimg"><img src="123.img" alt="测试超大图缩放"></img></div>
这种方法虽然可以将大图缩放到500宽度(光定义宽度,高度就会自动同比例缩小),但出现一个问题,就是小图也会放大,出现失真,当然这是不被允许的。。。。不是我们要的--PASS掉!
第三种方法,是在第二种方法的基础上
#testimg img
{
width:expression(document.body.clientWidth>500?"500px":"auto");
/*假如你的在此DIV层下包含的图片宽度超过了500PX,则将图片宽度设置为500px大小,高度会自动同比例缩小*/
}
<div id="testimg"><img src="123.img" alt="测试超大图缩放"></img></div>
结果是,没有超过500px的小图会显示真实大小,但超过500px的图则会缩小到500px.
注意:能不使用expression就不要使用,一般不建议使用expression,因为expression对浏览器资源要求比较高。
也不符合web标准化设计并且不被火狐,Opera等浏览器支持。
----------------------------------------
所以目前纯用CSS的方式控制自动缩放图片的方法还是没找到一个好的。
------------------------------------------------
在网上找啊找找啊找,终于。。找到即支持IE6,又支持FF的完美图片自动缩放的控制语句,我真菜。。。写不出来,可能才看了几天CSS的缘故。。。还是自己太笨,说不清楚。。
代码如下!~~
=======================
.img
{
max-width:458px;
height:auto;
cursor:pointer;
border:1px double #4E6973;
padding: 4px;
zoom:expression( function(elm)
{ if (elm.width>458)
{ var oldVW = elm.width; elm.width=458;
elm.height = elm.height*(458 /oldVW);
} elm.style.zoom = '1';
}
(this));
}
======================
原创作者是的BLOG地址是:
http://achro.blog.163.com/blog/static/22121912009213114046617/
很感谢~
[size=large][color=red][b]还有一种方法[/b][/color][/size]
pictureDiv.innerHTML="<p id='pv'><img src='"+fileName+"' id='imgshowing' border=\"1\" οnlοad=\"resizeImage(this)\"/></p>" ;//图片垂直居中
//调整图片的大小
function resizeImage(object){
if (object.width>=480){
var picwidth= object.width;
object.width=480;
object.height=object.height*480/picwidth;
if(object.height>384)
object.height=384;
}
}