之前写主题的时候,缩略图固定大小这个问题一直困扰着我。
固定了图片宽度和高度就会导致图片变形,如果是一个很长的长方形图片固定为正方形之后,整个图片都变得模糊不清,根本没法看。
后来就用缩略图插件剪裁生成固定大小的缩略图来解决这个问题,但是过了一段时间发现插件生成的缩略图网页加载没法缓存,如果一个页面有很多缩略图,就会非常非常的占用资源,导致页面加载速度很慢很慢。
为了解决这个问题查阅了一些资料,最后的最后发现了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
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1vue3项目引入vant报错的错误原因和解决办法03-12
- 2天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 3zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 4天兴工作室2023双11活动:五折优惠券大放送11-05
- 5腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 6新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 7天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 8[已下线] 天兴工作室2023双节活动:五折优惠券09-29
- 951.la统计的js文件被劫持了会跳转违法网站09-27
- 标签聚合
- ×1zblog退出×1畅言评论数×1邮件通知×1问答模板×1表单验证×1联动类别×1zblog评论字段×1zblog邮箱×1zblog管理员×1zblog百度小程序×1什么值得买×12019×1驱动×1win8平板×1图片隐藏×1小程序开发×1zblog免费主题×1武汉音乐学院青山基地×1个人博客×1zblog文章管理
最新评论
-
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求 -
访客
01-16点击分类,能不能下面显示所有分类的名字。 -
天兴工作室
01-13多条件筛选很麻烦,主题不考虑加,有需求可以联系我定制
有 1 位网友评论:
值品 6年前 (2018-10-02) 回复
这个简直是牛逼的存在呀,找了半天没解决,结果就一个属性的问题。