部落格中限定貼圖大小

在我的blog 中最主要是貼圖部分, 常在一篇文章內容裡貼了20 幾張圖. 我採用Photobucket 外連貼圖方式.
整批上傳全選後自動生成整批語法, 直接貼到文章區, 非常快速. photobucket中可自動將圖片縮成指定尺寸但是原來的大圖就無法保存了. 實在捨不得那些高清的大圖, 為了保存原圖, 所以在上傳時設定不縮圖(當然是在限制的1mb內).
但問題來了, 貼在部落格上以我的寬螢幕也會有超過畫面的時候, 照片就被切掉了. 找到解決方法了…快記下來…

調整部落格文章區貼圖大小.

1.一兩張時可以在文章區點圖片四周會產生虛線用手動框線調整

2 .excel 上 用複製欄位的方式快速修改數張貼圖語法.

3.部落格中一勞永逸設定圖片大小: 在yahoo blog 中有效的方法 在面板設定自訂語法中加入div img {max-width:950px;} 就可以了, 寬度大於950 的圖片自動縮成 950 , 像兩邊側欄是較小的圖片並不會作用.

另外如果不是外連圖可用刪掉”ap_” 的方式貼上原始大圖. (方法參考 “在 yahoo 部落格文章區貼圖不縮小” 也常會有破屏被切圖的時候, 這項設定一樣有效喔!
哇! 暫時解決問題了.

 

(爬文找了一些語法試過都沒成功, 或許yahoo 限制不能用, 或許因為我不知使用方法. 希望知道的格友也多交流喔!)
1.

CSS 強制縮圖

為避免使用者插入過大圖片，可利用CSS來將之強制縮圖！

 div. className  img { max-width: 500px; width:expression(this.width > 500? "500px" : this.width); overflow:hidden; }

 

div. className img中的500則是指定圖片寬度上限，超過此上限，會強制縮到500px，這樣就不用擔心被圖稱破版面了。

「max-width」IE不支援，所以才用CSS Expression來讓IE縮放寬度

IE 8 版本在標準模式下，不再支援CSS Expression
文章來源: http://calos-tw.blogspot.com/2011/08/css.html

2. 圖片寬度大於600像素,都強制顯示為200像素寬,高則是跟隨寬度等比例縮小

在＜head＞...＜/head＞裡置入下列指令：

＜style type="text/css"＞

img {width:expression(this.width>600?"200px":this.width+"px");}

＜/style＞

＜＞改為半形

圖片寬度大於600像素,都強制顯示為200像素寬,高則是跟隨寬度等比例縮小適合用在讓 user 自行上傳的頁面,美化頁面用,圖檔 k 數不會縮
文章來源: http://selene-tw.blogspot.com/2008/07/600200.html

3. div img {

/* IE7、FF等其他非 IE 瀏覽器下最大寬度為 500px , IE6 以下不支援 max-width 屬性 */

max-width:500px;

/* 所有瀏覽器中圖片的大小為 500px */

width:500px;

/* 當圖片大小大於 500px，自動縮小為 500px */

width:expression(document.body.clientWidth>500?"500px":"auto");

overflow:hidden;

}

文章來源: http://fanchie.blogspot.com/2008/02/css-css.html

 

4. 請先打開你的網站css檔案

輸入以下代碼：

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的元素皆適用這個設定。如此應該就能看到成效了。

文章來源:http://goodlucky.pixnet.net/blog/post/28297356-%5bcss%5d%e8%ae%93%e5%9c%96%e7%89%87%e8%87%aa%e5%8b%95%e9%81%a9%e6%87%89div%e5%a4%a7%e5%b0%8f

---

• 留言者: Sonatina
• Email: sonatinajk@yahoo.com.hk
• 網址:
• 日期: 2012-03-22 03:12:41

Dear Coco, thank you for the information !

I don't know about this,  will figure this out when I have time.

so busy these days, our boy JG tweets everyday ... hahaha ~~

do you tweet with him at twitter ? it has big fun , He really read fan's tweets at twitter ^Q^

[版主回覆03/22/2012 23:41:16]

twitter 這麼留, 感覺很溫馨很親近. 只是真的忙壞了!! 好吧! 幸福的忙碌......甘願阿~~~