圖片太大或圖片右邊被截斷如何處理?為圖片加上最大寬度的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. 下方可以直接預覽,所以可以一邊調整數字,調整完後再右上方的「套用至網誌」