WFU WFU
2020年5月10日 星期日

【語法】手機版圖片又超出邊界,Blogger版面更新語法調整



關於Blogger版面更新(2020.04)



這陣子發現Blogger後台版面又不一樣了,自從年初那次更新害我一個不小心按下“回到傳統模式”(不是“回到傳統檢視”好嗎差一個字很恐怖),當下晴天霹靂發現我的心血全部泡湯了!


那回靠存檔還是修了好幾天才修回來,所以這次看到更新後的詭異版面,我我真的冷汗直流......果不其然,難解問題還是出現了!


手機版問題畫面



電腦版問題畫面



Blogger這次更新後,圖片都會超出版面邊界,不管用手機版或電腦版瀏覽都會覺得哪裡怪怪的,已經不是之前設定好的樣子。

即使之前已經在CSS加入不會超出邊界的語法,現在還是出現這樣的問題,真的很令人費解。

幸好我有摸出解決方式,分享如下:





圖片超出邊界語法修改






一樣在後台:主題▶自訂▶進階▶新增CSS這裡,以前大家輸入的應該是以下這些語法:

.post img {max-width: 100% !important}
或是
.post img {max-width: 98% !important}
或是
.post-body img {max-width: 100%;}
等等之類.....


但現在可以試試改成以下這個語法:

.post img {max-width: 92% !important}


沒錯只要改一下數字,我試過發現92%看起來最剛好,所以直接將上面這串新語法複製貼上到CSS這個框框裡,然後按右上角套用至網誌,就大功告成!




手機版解決後畫面




電腦版解決後畫面



雖然圖片似乎比以前小,但至少暫時解決目前棘手問題,研究語法一直是個人小小興趣,希望以上有幫到各位苦主!








3 則留言:

  1. 報告,我的手機板網頁也遇到同樣狀況,但輸入CSS後狀況依舊QQ

    https://www.wanghenry.com/

    不知道跟後台的【寬度】測欄寬度、內容寬度、內容邊界的設定值有沒有關聯?

    回覆刪除
    回覆
    1. 嗨嗨真抱歉現在才看到><
      我看您2/28的文章圖片是沒有問題的耶
      圖片有置中~
      我覺得應該跟寬度無關~
      目前最困擾我的是圖片都偏小,無法頂到邊界.....

      刪除
    2. 嗨嗨,沒關係,謝謝你回覆。
      我後來有找到原因了,亂增加一個html小工具所導致的,調整他的寬度就沒問題囉。

      刪除

(留言要等待片刻才會出現噢)