如果有使用Blogger寫網誌的話,應該都會遇到一個問題,就是:
手機版的圖片都會變形(;´д`)問題
原本網誌看到的圖片會像這樣,看起來正常![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUBxl2j9Av4ouBzUc7_Z7opHkg_lwqloigmNnNPxnCpjIt5gbpB3VcbduC_sTppCLPcvad08FSkc4-Bbnyi9ZUpRNCOpOoEl2MOgwM3s-0QG0gJGh7S7V9nat1913-c8oc_9pRNDuV/s640/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2019-04-03+%25E4%25B8%258B%25E5%258D%258810.14.18.png)
但如果用手機瀏覽的話就會變成這樣
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHlFo6SK7zPVgd7c53DbzjKJdgxEAP-LXARoFdId-Q9Ag_YTaTc6UzWmLuSAt5m_X_lCUNkiHOB6PoT4W0nRDf2mLdXlydQWf0zkllDy-a_xoXG4kru3Fwyo9_BOD_IIgPwG7X8p7C/s640/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2019-04-03+%25E4%25B8%258B%25E5%258D%258810.09.04.png)
相信大家一定都很痛苦的
這篇就來解決大家的問題吧!
原因
原因其實是因為Blogger在原本設計的時候,將我們上傳的圖都會寫上圖片的高度與寬度。
變成手機版的時候,寬度有做調整但是高度沒有再另外做調整,導致手機版圖片變形,其實我覺得是Blogger的一個bug,但還是可以修正的。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT32olJrE2ySpPDmtil_zpkgfHxBvW4mVBVOX3LYlskWuve8PFS6qcmmDgsNYasOl_ydGPiiB0ZGNM3ki9NFboptuZGx6cv8K_c26hF4uozSYEa7eCiUVnmp5dzLPvdmvGHwlwZ46C/s640/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2019-04-03+%25E4%25B8%258B%25E5%258D%258810.32.54.jpg)
其實把高度那一段"height="331"拿掉就可以了,可是圖片很多張要一張一張拿很累,可以用CSS或是Script的方法統一拿掉,永無後患
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT32olJrE2ySpPDmtil_zpkgfHxBvW4mVBVOX3LYlskWuve8PFS6qcmmDgsNYasOl_ydGPiiB0ZGNM3ki9NFboptuZGx6cv8K_c26hF4uozSYEa7eCiUVnmp5dzLPvdmvGHwlwZ46C/s640/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2019-04-03+%25E4%25B8%258B%25E5%258D%258810.32.54.jpg)
其實把高度那一段"height="331"拿掉就可以了,可是圖片很多張要一張一張拿很累,可以用CSS或是Script的方法統一拿掉,永無後患
解決方法
其實正常在寫網頁的時候,高度都不會特別去寫,而瀏覽器原本對於圖片的設定,高度就是auto,所以我們只要把這個高度拿掉或是變成auto就可以了。
*作法1:修改在CSS
略懂CSS的人可以直接修改CSS,但要很小心,萬一改錯地方或是不小心亂按到鍵盤整個主題壞掉就GG了。
最簡單也最危險,修改前記得備份。
最簡單也最危險,修改前記得備份。
- 去自己的主題修改CSS
- Ctrl+F叫出搜尋功能,搜尋".post-body img"
- 於相關位置,加入一行:"height:auto;"
完成後可以檢查一下有沒有加成功
檢查方法:對著圖片按右鍵>檢查>確認有沒有加成功
檢查方法:對著圖片按右鍵>檢查>確認有沒有加成功
*作法2:寫Script並藏在共用網頁中
可以加寫在網頁某處,簡單明瞭,所有網頁共用的Script(例如:簽名檔)都可以寫在一起,要修改時可以快速拿掉。
加入一串程式碼在網頁中的某處,因為是全部的頁面共用的,所以建議可以藏在側欄。
比較安全,寫錯的話直接刪掉就好了。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlWLah7thUzET4nLyUHDqwDanXAg-lAcFEp1dDbi6ivMB7h1V098egxrcgYg3gSU15wFNd0421Ooqao8z_5nfL8CVWV-xv9A8ja-rTEqSKM1BsJO4EL43nddQUiuL5iWfInwGikLer/s640/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2019-04-03+%25E4%25B8%258B%25E5%258D%25889.52.08.jpg)
藏在側欄,像是這樣的東西裡面
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpOKtfzMK1kxdxHUczX86T-WA6S_cQugeMsCgoDkY-3ysqU0Frz72Bp7uGgKdBxZPGkEbIWFAE-UxChyphenhyphenqW6dMvELaOLOya1GvpCm6ShZjk5B_irVlV3x26T5Nhg2RhUglFkdbxwcHV/s640/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2019-04-03+%25E4%25B8%258B%25E5%258D%25889.49.39.png)
新增側欄的時候就選擇:HTML/JavaScript,就可以在裡面加寫一些程式碼
表面上是一些文字裡面藏一段:
比較安全,寫錯的話直接刪掉就好了。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlWLah7thUzET4nLyUHDqwDanXAg-lAcFEp1dDbi6ivMB7h1V098egxrcgYg3gSU15wFNd0421Ooqao8z_5nfL8CVWV-xv9A8ja-rTEqSKM1BsJO4EL43nddQUiuL5iWfInwGikLer/s640/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2019-04-03+%25E4%25B8%258B%25E5%258D%25889.52.08.jpg)
藏在側欄,像是這樣的東西裡面
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpOKtfzMK1kxdxHUczX86T-WA6S_cQugeMsCgoDkY-3ysqU0Frz72Bp7uGgKdBxZPGkEbIWFAE-UxChyphenhyphenqW6dMvELaOLOya1GvpCm6ShZjk5B_irVlV3x26T5Nhg2RhUglFkdbxwcHV/s640/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2019-04-03+%25E4%25B8%258B%25E5%258D%25889.49.39.png)
新增側欄的時候就選擇:HTML/JavaScript,就可以在裡面加寫一些程式碼
表面上是一些文字裡面藏一段:
<script>
$(function(){
//文章內文中所有圖片高度設定為:自動
$(".post-body img").height("auto");
});
</script>
$(function(){
//文章內文中所有圖片高度設定為:自動
$(".post-body img").height("auto");
});
</script>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTxDoTAvFqIhNiTTQXJ-jW7qSN5MA4Z-D2T-yvaD7rn5hUDSNAF6ng3SKYhsjdFcEDk8ngHl-UIE182rWMpZwDNLXTHr0urBq-AY76BI7V5MlzGxDmHR58SKP3JieMj0706CAFzb1o/s640/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2019-04-03+%25E4%25B8%258B%25E5%258D%258810.09.46.jpg)
再去檢查一下圖片,就會看到有多一段height="auto"程式碼在下方,圖片也變正常囉!
修改方法,以上。
問題無法解決?!
基本上大家的HTML架構會是一樣的,所以我使用.post-body img去控制圖片但如果有人的class名稱長得不一樣的話會抓不到,要再看看自己的class名稱長怎麼樣子。
沒有成功的朋友們再留言問問我吧!d( ・ω´・+)
沒有留言:
張貼留言