之前写主题的时候,缩略图固定大小这个问题一直困扰着我。
固定了图片宽度和高度就会导致图片变形,如果是一个很长的长方形图片固定为正方形之后,整个图片都变得模糊不清,根本没法看。
后来就用缩略图插件剪裁生成固定大小的缩略图来解决这个问题,但是过了一段时间发现插件生成的缩略图网页加载没法缓存,如果一个页面有很多缩略图,就会非常非常的占用资源,导致页面加载速度很慢很慢。
为了解决这个问题查阅了一些资料,最后的最后发现了css新出的一个属性值可以完美解决这个问题。
这个属性值就是:
object-fit: cover;
张鑫旭大神给这个属性值写了一篇文章来详细解释,感兴趣的可以前往阅读:http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/。
给图片固定宽度和高度后再加上此属性值,即可保证不管什么形状的图片都可以正常显示并不变形。此属性浏览器的支持程度如下图:
看这图,完全可以放心大胆的用了,真的是很胖胖哦。
本文标签:#缩略图变形#object-fit
相关推荐
- vue3项目引入vant报错的错误原因和解决办法03-12
- zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 51.la统计的js文件被劫持了会跳转违法网站09-27
- 微信支付JSPAI调起支付后提示“该订单已过期,请重新下单”的解决办法06-11
- 宝塔一键迁移提示“连接服务器失败”的原因和解决办法05-16
- 微信小程序报错:operateWXDataForAd:fail的原因和解决办法05-14
- php保存添加bom头的txt文件和读取时去除txt的bom头05-02
- 小程序使用mp-html组件后输出空白的原因和解决办法04-08
- zblog获取全部分类列表函数GetCategoryList的参数和使用方法介绍说明03-30
- emlog通过分类id获取指定分类的标题链接等数据03-20
- 小皮面板(phpstudy)提示No input file specified的原因和解决办法03-07
- zblog获取当前页面的标题/链接/ID等属性02-02
- windows+phpstudy+Apache设置允许跨域请求的方法01-09
- 网站使用宝塔面板服务器cpu占用100%排查方法和解决方案01-04
- zblog应用中心如何开发票?在zblog应用中心购买应用后开发票流程11-29
- zblog模板文章发布时间格式详细说明11-23
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 2天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 3vue3项目引入vant报错的错误原因和解决办法03-12
- 4天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 5zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 6天兴工作室2023双11活动:五折优惠券大放送11-05
- 7腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 8新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 9天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 标签聚合
- ×1会员注册×1zblogphp分类×1.zba×8宝塔面板×1ReWrite规则×1图片加alt×12018×1jQuery框架×2zblog安装主题×1zblog回到顶部×1zblogphp单篇文章×1天兴科技×1二级目录×2zblog营销模板×2description×1emlog6介绍×1当前页面链接×1idc×1苹果cms×1zblog2.0下载
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求
有 1 位网友评论:
值品 6年前 (2018-10-02) 回复
这个简直是牛逼的存在呀,找了半天没解决,结果就一个属性的问题。