[網頁,部落格]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( ・ω´・+)

2 則留言:

Instagram