转 DIV+CSS 布局学习 记录 之 图片缩放

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.

注意:能不使用e­xpression就不要使用，一般不建议使用e­xpression，因为e­xpression对浏览器资源要求比较高。
     也不符合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/

很感谢~





还有一种方法
pictureDiv.innerHTML="<p id='pv'><img src='"+fileName+"' id='imgshowing'  border=\"1\" onload=\"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;   
  }
}