图片自动随div大小改变

做网页、论坛贴图、写部落格。只要有需要上传图片的机会，就一定常碰到这问题。一旦不小心上传一个大于版面的图片，轻则内容被盖住，重则排版全乱掉，画面惨不忍睹。

一般的css处理方法都是靠 over-flow:hidden; 来达成的。但这样做有个缺点，跑出去的内容会被隐藏起来。如果文字跟着被隐藏的话就看不到了。

在这里提供一个同样用css的解决办法吧，能够自动调整图片大小。其实在Mozilla系列浏览器中都支持Max与Min的大小设定，只要css做这样处理，就能限定任何元素的最大或最小长宽。

不过伟大的Microsoft硬是不支持这指令，我们只好拉长程序代码啦，整个代码变得落落长，因为插入了javascript在里面。

请先打开你的网站css档案，输入下面的代码：

// SyntaxHighlighter.config.clipboardSwf = "http://www.365joomla.com/plugins/content/codecitation/scripts/clipboard.swf";
SyntaxHighlighter.defaults["auto-links"] = true;
SyntaxHighlighter.defaults["collapse"] = false;
SyntaxHighlighter.defaults["gutter"] = true;
SyntaxHighlighter.defaults["smart-tabs"] = true;
SyntaxHighlighter.defaults["tab-size"] = 4;
SyntaxHighlighter.defaults["toolbar"] = true;
SyntaxHighlighter.defaults["wrap-lines"] = true;
SyntaxHighlighter.all();
// ]]>

.

img {

　　max-width:600px;

　　myimg:expression(onload=function(){

　　this.style.width=(this.offsetWidth > 600)?"600px":"auto"});

}

你可以将600设为任何你要的宽度

若只想限定某个区域中的图片，请输入：

.

#div img {

　　max-width:600px;

　　myimg:expression(onload=function(){

　　this.style.width=(this.offsetWidth > 600)?"600px":"auto"});

}

#div就是那个区域的id，意思是＃div底下所有卷标为img的元素皆适用这个设定。如此应该就能看到成效了