讓 Blogger 精選文章的圖片不被裁切

blogger 精選文章 圖片 被裁切


這算是挺奇怪的小問題,就是首頁精選文章的縮圖有時候會無法正常顯示,不是底部被裁切就是兩邊消失。翠近貧


原先流浪貓以為是長寬比或 Blogger 版型的問題,但即便針對縮圖製作符合大小的圖片,發佈之後仍會被不正常的自動裁切 (Crop)。


 

讓精選文章的圖片不被裁切

造成影像無法完全顯示的原因在於,Blogger 精選文章小工具的『縮圖』有最大高度限制 (max-height)。


這項設定雖然能讓文章縮圖高度一致,避免版位錯亂、超出畫面,但麻煩的地方在於若圖片高於預設值高度,它會以頂部為起點,裁掉影像底部多出來的部份。而這個問題的解決方法意外的簡單。



適用 Blogger 主題:Contempo

Blogger > 主題 > 編輯 HTML

搜尋:.FeaturedPost .snippet-thumbnail

將 max-height 改成 100% 即可。



程式碼示範如下:

.FeaturedPost .snippet-thumbnail{
float:none;
height:auto;
margin-bottom:2em;
margin-$endSide:0;
overflow:hidden;
max-height:100% // calc(600px + 2em);
max-width:100%;
text-align:center;
width:100%
}

 

如此一來,就能完整顯示文章的縮圖了。

 



 

延伸閱讀

更多 Blogger 調校教學

更多 SEO 教學文章


 

 

 

 

留言

這個網誌中的熱門文章

Windows 11 真有必要升級嗎?安裝前你應該要知道的災情 (2022/12)