讓 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%
}
如此一來,就能完整顯示文章的縮圖了。
延伸閱讀