之前写主题的时候,缩略图固定大小这个问题一直困扰着我。
固定了图片宽度和高度就会导致图片变形,如果是一个很长的长方形图片固定为正方形之后,整个图片都变得模糊不清,根本没法看。
后来就用缩略图插件剪裁生成固定大小的缩略图来解决这个问题,但是过了一段时间发现插件生成的缩略图网页加载没法缓存,如果一个页面有很多缩略图,就会非常非常的占用资源,导致页面加载速度很慢很慢。
为了解决这个问题查阅了一些资料,最后的最后发现了css新出的一个属性值可以完美解决这个问题。
这个属性值就是:
object-fit: cover;
张鑫旭大神给这个属性值写了一篇文章来详细解释,感兴趣的可以前往阅读:http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/。
给图片固定宽度和高度后再加上此属性值,即可保证不管什么形状的图片都可以正常显示并不变形。此属性浏览器的支持程度如下图:
看这图,完全可以放心大胆的用了,真的是很胖胖哦。
本文标签:#缩略图变形#object-fit
相关推荐
- 支付宝支付后异步通知页面提示”支付签名校验失败,请联系管理员!“的原因和解决方法05-08
- zblog登录后台一直提示验证码错误的原因和解决方法03-01
- zblog使用api提交post数据提示419错误的原因和解决方法02-23
- vue3项目引入vant报错的错误原因和解决办法03-12
- zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 微信支付JSPAI调起支付后提示“该订单已过期,请重新下单”的解决办法06-11
- 宝塔一键迁移提示“连接服务器失败”的原因和解决办法05-16
- 微信小程序报错:operateWXDataForAd:fail的原因和解决办法05-14
- php保存添加bom头的txt文件和读取时去除txt的bom头05-02
- 小程序使用mp-html组件后输出空白的原因和解决办法04-08
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室多语言翻译插件 自动翻译多达12种语言 适合外贸站点06-23
- 2有道云翻译获取appid和seckey的详细步骤和截图06-22
- 3支付宝支付后异步通知页面提示”支付签名校验失败,请联系管理员!“的原因和解决方法05-08
- 4阿里云oss配置项获取步骤截图,包含ID和Secret、区域节点Endpoint、存储空间Bucket和资源访问域名04-14
- 5zblog登录后台一直提示验证码错误的原因和解决方法03-01
- 6zblog使用api提交post数据提示419错误的原因和解决方法02-23
- 7天兴工作室2025年春节放假公告01-25
- 8天兴用户中心插件“微信通知”功能设置教程11-09
- 9阿里云2024双11活动推荐 通过本站链接参与另外赠送本站代金券11-05
- 标签聚合
- ×2zblog微信小程序×1注册会员×3蓝色模板×2广告×1include×1module×2二级栏目×1清明节×2开发模式×5唐世军×1zblog主题文件×1zblog商城主题×1zblogphp视频主题×1主机×1jiathis×1wiki×2cdn×1小伢×1wang×1再见2015
最新评论
-
访客111
总之不是免费的午餐,不走某Z模式,难发展 评论于:关于zblog版权的说明
-
天兴工作室
并没有任何限制 -
访客
请问 zblog淘客主题 对使用者的要求是必须是企业吧? -
阿浩
大佬们,丢几个除了作者以外的演示站,我想看看大家的布局设置 -
有趣生活
一直想开发zblog的功能,zblog的敷在不知道够够不够
有 1 位网友评论:
值品 7年前 (2018-10-02) 回复
这个简直是牛逼的存在呀,找了半天没解决,结果就一个属性的问题。