如何讓文章中的照片自動縮圖以符合版面呢?

不管是網路論壇或是網誌,
常常都會受限於版型而必須縮小照片,
不然就會因為照片超過大小而弄亂了整個版面!
但除了手動調整外,
(設定width=”xxx” height=”xxx”,或直接在用MOUSE縮拉照片的大小 → 這都要用手做動作調整!呵呵…)
是不是可以從程式面一次執行呢?
答案是可以的喔!

你只需要在你使用的版型中的style.css中放入下列的code即可:

img {
max-width:570px;height:auto;
　zoom:expression( function(elm) {
　　if (elm.width>>570) {
　　var oldVW = elm.width; elm.width=560;
　　elm.height = elm.height*(560 /oldVW);}
　　elm.style.zoom = '1';}(this));
myimg:expression(onload=function(){
this.style.width=(this.offsetWidth > >570)?"560px":"auto"});}

↑ 上面的CODE是對整個網誌中凡寬超過600的照片做比例縮圖,上列數字可以視個人需要修改

#div img {
max-width:570px;height:auto;
　zoom:expression( function(elm) {
　　if (elm.width>>570) {
　　var oldVW = elm.width; elm.width=560;
　　elm.height = elm.height*(560 /oldVW);}
　　elm.style.zoom = '1';}(this));
myimg:expression(onload=function(){
this.style.width=(this.offsetWidth > >570)?"560px":"auto"});}

↑ 上面的CODE中,#div是則是對某一特定區域(如#content)的照片做縮圖的動作

以我個人的BLOG做例子(請注意照片中的紅框處),如下:

設定前

設定後

PS.照片本身為1005*550

本篇文章參考:
http://blog.asikart.com/-joomla-31/128-cssdiv.html
http://it.big5.enorth.com.cn/system/2008/06/16/003403673.shtml

本篇文章引用網址：