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

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

本文共565个字,预计阅读时间需要2分钟。


前言

有些人在群里说文章缩略图变形了,比例失调,图像被拉伸了,很难看。于是我就简单修复了一下,一行 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 | 电脑技术 | 摄影摄像 | 电影 | 电视剧 | 二次元
我们下次见

 

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

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

分享到:
赞(0) 打赏
您阅读这篇文章共花了: 0小时00分00秒

评论 2

7 + 7 =
  1. #1

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

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

请作者喝杯饮料吧~

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录