前言

有些人在群里说文章缩略图变形了,比例失调,图像被拉伸了,很难看。于是我就简单修复了一下,一行 CSS 代码解决,手机和电脑都顺利兼容。

修复wordpress文章缩略图比例变形,Vieu 缩略图拉伸变形

话不多说,3 2 0,我们开始吧~

方法

样式如下:

修复wordpress文章缩略图比例变形,Vieu 缩略图拉伸变形

把以下CSS代码加到主题设置>自定义CSS样式中去

/*修复文章缩略图比例变形 www.320nle.com*/
img.thumb {
    object-fit: cover !important;
}

修复wordpress文章缩略图比例变形,Vieu 缩略图拉伸变形

 

原理解释

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

  • fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。
  • contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致,长的那条等比缩放,可能会有留白。
  • cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致,短的那条等比缩放。可能会有部分区域不可见。
  • none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。
  • scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸,保持图片的原有尺寸,不会放大失真;容器尺寸小于图片内容尺寸,用法跟contain一样。

于是,你可以把cover替换成其他值看看效果,喜欢哪种用哪种把~

修复wordpress文章缩略图比例变形,Vieu 缩略图拉伸变形

 

Hey,你好哇。
影视剪辑 | AE | Pr | 电脑技术 | 摄影摄像 | 电影 | 电视剧 | 二次元
我们下次见

 

本文最后更新于2020年1月10日,已超过 4 个月没更新!

本文首发于320印象,欢迎转载,但是必须保留本文的署名320印象(包含链接)。如您有任何商业合作或者授权方面的协商,请给我留言:admin@mail.320nle.com作者:静海流沙, 转载或复制请以 超链接形式 并注明出处 320印象
原文地址:《修复wordpress文章缩略图比例变形,Vieu 缩略图拉伸变形》 发布于2019-10-17

分享到:
赞(0) 打赏 生成海报

评论 2

9 + 3 =
  1. #1

    博主,你这个主题的缩略图是怎么弄得呢,是自动截取的第一张文章图片,还是启用的特色图像呢?

    KK猫8个月前 (10-20)回复

长按图片转发给朋友

请作者喝杯饮料吧~

支付宝扫一扫打赏

微信扫一扫打赏

320印象
分享自己所学的知识,收集网络有用的资源