提供zblog模板 emlog模板 dedecms模板的下载和仿站定制
当前位置:网站首页 > 教程 > 正文

一个css的新属性 可以固定图片宽度高度后保持不变形

天兴工作室 2018-04-08 教程 15178 1 评论


之前写主题的时候,缩略图固定大小这个问题一直困扰着我。

固定了图片宽度和高度就会导致图片变形,如果是一个很长的长方形图片固定为正方形之后,整个图片都变得模糊不清,根本没法看。

后来就用缩略图插件剪裁生成固定大小的缩略图来解决这个问题,但是过了一段时间发现插件生成的缩略图网页加载没法缓存,如果一个页面有很多缩略图,就会非常非常的占用资源,导致页面加载速度很慢很慢。

为了解决这个问题查阅了一些资料,最后的最后发现了css新出的一个属性值可以完美解决这个问题。

这个属性值就是:

object-fit: cover;

 张鑫旭大神给这个属性值写了一篇文章来详细解释,感兴趣的可以前往阅读:http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/

给图片固定宽度和高度后再加上此属性值,即可保证不管什么形状的图片都可以正常显示并不变形。此属性浏览器的支持程度如下图:

一个css的新属性 可以固定图片宽度高度后保持不变形 object fit 缩略图变形 教程 第1张

看这图,完全可以放心大胆的用了,真的是很胖胖哦。

没有找到解决你问题的教程?

您可以试着搜索一下或者直接在线提问。我们也提供收费技术支持,有需要可以在线联系我们。

在线提问 在线客服

1 位网友评论:

  • 值品

    值品 1年前 (2018-10-02) 回复

    这个简直是牛逼的存在呀,找了半天没解决,结果就一个属性的问题。

取消回复欢迎 发表评论:

  • 请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合
×57zblog模板×33zblog×27zblogphp×20zblogphp模板×18天兴工作室×16阿里云×12dedecms×11电子券×11ytcms×10天兴互联×10zblog企业模板×10zblog插件×9随意打×9模板×9zblog安装×9zblogphp1.5×9zblog错误×8天兴通讯×8刷机×8企业模板

请登录

社交账号登录

将本文分享给你的朋友们