圖片太大或圖片右邊被截斷如何處理？為圖片加上最大寬度的CSS

最近大家因為搬家，不少人會發生圖片出超，或圖片的右邊被砍掉！

右邊可能會出超 ▼

右邊被砍掉▼

幾個簡單的步驟來解決這個問題...

步驟一： 先確定網誌的內容的寬度

工具邦有兩項工具可以讓您測量網誌內容的寬度，不需要安裝軟任軟體哦！

1. 到 測量網頁中的長度和寬度
2. 在上方輸入自己的部落格網址，再按 enter
3. 接著用滑鼠拖曳一個區塊來測量網誌內文的寬度，上方就會顯示你拉出來的方框的寬度了
   

但是您的網誌有可能因為有安裝特定的 script 來防止 iframe 網頁(像是 7headlines 或 funp)，您也可以使用這個工具

1. 先到線上尺規
2. 按「橫的尺」，就會跳出一個新的視窗，用這個跳出來的視窗來測量內容的寬度
   

這個步驟主要是得到一個數字，比如說 550 ，單位是 px

步驟二：設定 CSS

上個步驟拿到了內容寬度，通常要再減個 20 左右，因為內容的左右邊會有一些空白。

痞客邦的修改方式

有兩個方法可以修改，我們建議是用這個方法

1. 到痞客邦的首頁登入痞客邦
2. 樣式管理 → 自訂樣式 → CSS原始碼編輯
3. 在中間的框框中有語法，在語法的最下方加上這一行(紅色部份請自行修改)
   .article-content img { max-width:530px; }
4. 再按右上角的儲存

或者用這個方法也行，但這個方法可能會有圖片忽大忽小的問題

1. 到痞客邦的首頁登入痞客邦
2. 基本 / 進階設定 → 文章顯示相關設定 → 強制調整至_530_px
3. 右下角的「儲存設定」

Blogger的修改方式

1. 到 Blogger 後台 → 進入自己的部落格
2. 範本 → 自訂 → 進階 → 新增 CSS
3. 在新增自訂CSS的下方那個框，加上這一行(紅色部份請自行修改)
   .post-body img { max-width:530px; }
4. 下方可以直接預覽，所以可以一邊調整數字，調整完後再右上方的「套用至網誌」