[網頁，部落格]Blogger網誌中的圖片於手機版變形問題

 如果有使用Blogger寫網誌的話，應該都會遇到一個問題，就是：

手機版的圖片都會變形(;´д｀)

問題

原本網誌看到的圖片會像這樣，看起來正常


但如果用手機瀏覽的話就會變成這樣

相信大家一定都很痛苦的
這篇就來解決大家的問題吧！

原因

原因其實是因為Blogger在原本設計的時候，將我們上傳的圖都會寫上圖片的高度與寬度。

變成手機版的時候，寬度有做調整但是高度沒有再另外做調整，導致手機版圖片變形，其實我覺得是Blogger的一個bug，但還是可以修正的。

其實把高度那一段"height="331"拿掉就可以了，可是圖片很多張要一張一張拿很累，可以用CSS或是Script的方法統一拿掉，永無後患

解決方法

其實正常在寫網頁的時候，高度都不會特別去寫，而瀏覽器原本對於圖片的設定，高度就是auto，所以我們只要把這個高度拿掉或是變成auto就可以了。

＊作法1：修改在CSS

略懂CSS的人可以直接修改CSS，但要很小心，萬一改錯地方或是不小心亂按到鍵盤整個主題壞掉就GG了。
最簡單也最危險，修改前記得備份。

步驟：

• 去自己的主題修改CSS
• Ctrl+F叫出搜尋功能，搜尋".post-body img"
• 於相關位置，加入一行："height:auto;"

完成後可以檢查一下有沒有加成功
檢查方法：對著圖片按右鍵>檢查>確認有沒有加成功

＊作法2：寫Script並藏在共用網頁中

可以加寫在網頁某處，簡單明瞭，所有網頁共用的Script（例如：簽名檔）都可以寫在一起，要修改時可以快速拿掉。

加入一串程式碼在網頁中的某處，因為是全部的頁面共用的，所以建議可以藏在側欄。
比較安全，寫錯的話直接刪掉就好了。

藏在側欄，像是這樣的東西裡面


新增側欄的時候就選擇：HTML/JavaScript，就可以在裡面加寫一些程式碼
表面上是一些文字裡面藏一段：

<script>
$(function(){
            //文章內文中所有圖片高度設定為：自動
            $(".post-body img").height("auto");
});
</script>

再去檢查一下圖片，就會看到有多一段height="auto"程式碼在下方，圖片也變正常囉！

修改方法，以上。

問題無法解決？！

基本上大家的HTML架構會是一樣的，所以我使用.post-body img去控制圖片
但如果有人的class名稱長得不一樣的話會抓不到，要再看看自己的class名稱長怎麼樣子。
沒有成功的朋友們再留言問問我吧！d( ･ω´･+)