修復wordpress文章縮略圖比例變形,Vieu 縮略圖拉伸變形

前言

有些人在群里說文章縮略圖變形了,比例失調,圖像被拉伸了,很難看。於是我就簡單修復了一下,一行 CSS 代碼解決,手機和電腦都順利兼容。

話不多說,3 2 0,我們開始吧~

方法

樣式如下:

把以下CSS代碼加到主題設置>自定義CSS樣式中去

/*修復文章縮略圖比例變形 www.320nle.com*/
img.thumb {
    object-fit: cover !important;
}

 

原理解釋

object-fit CSS 屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框。

  • fill: 默認值。內容拉伸填滿整個content box, 不保證保持原有的比例。
  • contain: 保持原有尺寸比例。長度和高度中短的那條邊跟容器大小一致,長的那條等比縮放,可能會有留白。
  • cover: 保持原有尺寸比例。寬度和高度中長的那條邊跟容器大小一致,短的那條等比縮放。可能會有部分區域不可見。
  • none: 保持原有尺寸比例。同時保持替換內容原始尺寸大小。
  • scale-down:保持原有尺寸比例,如果容器尺寸大於圖片內容尺寸,保持圖片的原有尺寸,不會放大失真;容器尺寸小於圖片內容尺寸,用法跟contain一樣。

於是,你可以把cover替換成其他值看看效果,喜歡哪種用哪種把~

 

Hey,你好哇。
影視剪輯 | AE | Pr | 電腦技術 | 攝影攝像 | 電影 | 電視劇 | 二次元
我們下次見

 

收集的所有資源均來自網路,僅供私下交流學習之用,任何涉及到商業目的的均不能使用,否則產生的一切後果由您自行承擔,提供資源但是不對任何資源負法律責任,所有資源請在你下載後24小時刪除。 如有侵權,聯繫 admin#mail.320nle.com
320印象 » 修復wordpress文章縮略圖比例變形,Vieu 縮略圖拉伸變形

2 評論

  1. 博主,你這個主題的縮略圖是怎麼弄得呢,是自動截取的第一張文章圖片,還是啟用的特色圖像呢?

發表評論