修复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. 博主,你这个主题的缩略图是怎么弄得呢,是自动截取的第一张文章图片,还是启用的特色图像呢?

静海流沙进行回复 取消回复