Blogger 標題圖片如何正確上傳呈現 以及 修正手機橫式螢幕圖片無法置中滿版的自適應解法

很多站長在建立 Blogger 部落格時，都會想設計一個專屬的網站招牌（Header Banner）。但常常遇到兩個問題：

1.不知道該去哪裡上傳、怎麼設定才能讓圖片完全取代文字標題？

2.好不容易上傳了，在手機「直式」看很完美，但手機一轉成「橫式」，圖片下半部卻硬生生被切掉一半？

本篇教學將帶你從零開始，一步步完成 Blogger 標題圖片的上傳設定，並透過「編輯 HTML」直接植入一行神奇的 CSS 語法，徹底解決手機橫螢幕圖片被裁切的長年老症頭！

第一步：在 Blogger 後台正確上傳標題圖片:

當你設計好一張 Banner 圖片後（建議寬高比例約為 2.5 : 1，例如 800 x 320 px  可以請Gemini 協助製圖 或 裁切 ），請照著以下步驟上傳：

A.登入 Blogger 後台，點選左側選單的 版面配置。

B.找到最上方的 標頭，點擊該區塊右下角的 編輯（鉛筆圖示）。

C.彈出「設定標題」視窗後，往下滾動到 選取圖片上傳方式：

你可以選擇 輸入圖片網址 或 上傳位於電腦中的圖片 將檔案送上去。

【最關鍵的設定】 在 圖片位置 欄位中，請務必勾選：

[V] 圖片取代標題和說明

註：勾選這個選項，你的設計圖片才會完美變成網站的招牌，而不會跟原本的文字標題疊在一起變亂碼。

檢查預覽圖無誤後，點擊右下角的 儲存。

第二步：修改 HTML 原始碼，解決手機橫螢幕裁切問題:

上傳成功後，當手機切換成橫螢幕時，Blogger 為了強行把圖片寬度拉滿，網頁外框的高度卻被系統死死固定住，導致圖片下半部直接被「切掉（Crop）」。

因為目前後台的「自訂 CSS」區塊可能會有無法新增的狀況，我們直接用最根本、一定有效的方法：將語法寫進主題的 HTML 原始碼中。

請依照以下步驟操作：

A.進入 Blogger 後台，點選左側的 主題。

B.找到「自訂」按鈕旁邊的 下拉選單箭頭，點擊並選擇 編輯 HTML。

滑鼠請在程式碼視窗裡面任意地方點一下 ( 讓游標停在程式碼視窗內上面任何地方)，按下鍵盤上的快捷鍵 Ctrl + F（Mac 電腦請用 Cmd + F）喚出搜尋框。在搜尋框中輸入 </head> 並按下 Enter 進行搜尋。

找到 </head> 標籤後，在它的 前一行（也就是正上方），完整貼上以下這段帶有 style 標籤的程式碼 ( 紅字部分 )：

<style>

/* 修正手機橫螢幕圖片被裁切問題 */

@media screen and (min-width: 480px) and (orientation: landscape) {

  .header-image-wrapper img, 

  .header-image-container img,

  .brand-header-image {

    width: 100% !important;

    height: auto !important;

    object-fit: contain !important;

  }

}

</style>

貼上後，點擊右上角的 儲存（磁碟片圖示）即可大功告成！

這段語法幕後的改變原理:

這段 CSS 語法加上了最高強制指令（!important），對網頁下達了兩個關鍵動作：

height: auto（高度解放）： 告訴網頁「當手機轉成橫式、寬度變大時，高度也要跟著等比例變大，不准鎖死固定高度！」外框高度跟著圖片長大後，下半段的文字與圖案自然就被完整「吐」出來了。

object-fit: contain（完整置入）： 強制圖片無論外框怎麼變形，都必須「完完整整地待在框架裡」，絕對不允許自我裁剪。

透過直接修改 HTML 原始碼，你的 Blogger 網站不論在電腦、手機直式、或是手機橫式觀看，首頁招牌都能像個完美的相框一樣自動伸縮，完好無缺地呈現給讀者囉！