五月 07, 2009      上一篇:20090221 德元埤荷蘭村  下一篇:20090507深水。螢火蟲

bubble's weblog >> 泡泡的小筆記 >> 20090506 部落格CSS修改-自動縮小圖片

有時候,只是剛好對一張照片有那麼幾句話想說

並沒有打算要特地描述些什麼,而如此一來

若把照片放在 more 的分隔之後,在列表上的文章就會只有一兩行

若把照片放在 more 的分隔之前,在列表上圖片又會顯得尺寸太大

若把圖片縮小了在上傳,那好像看文章內文時,圖片會變得太小

要完整的解決這個問題,不就是換樣版,不就是傳兩種尺寸的照片上來...

這樣一來,還真的是挺給他辛苦又沒效率的  @@

意外發現,竟然自己的站裡面,就有幾組樣板,是可以自動縮小在列表上的照片的

哈哈~那個不就正是我想要的功能嗎?趕快去瞧一瞧這些樣板的原始碼

find_div_id.jpg

原來是要先找到列表樣板中,用來SHOW出摘要的那組CSS設定

CSS.jpg

接著去定義這組ID中的IMG標籤

設定一個寬度值,讓JAVA SCRIPT幫忙CSS來決定套用這組IMG標籤的圖片大小

以上面這個例子就是,如果圖片的寬度大於500像素,那麼就自動縮放到寬度500像素

My_template_old.jpg

上圖是修改CSS之前的情形,照片總是會凸出版面... @@  很討厭

My_template_new.jpg

修改完成之後,即使照片比這個 DIV 的寬度大,他也不會跑出去嚕 ^O^

整個看起來就是美觀整齊多了~~ 

如果你的樣板跟我有相同困擾的,也可以試看看喔 ~ :) 


引用URL

http://bubbleliao.idv.tw/lifetype/trackback.php?id=1216

迴響

發表迴響
 authimage
 
Since 080211