提供zblog模板_zblog主题_wordpress模板的下载和定制

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

天兴工作室 2018-04-08 22:17 教程 22305 1 评论


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

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

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

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

这个属性值就是:

object-fit: cover;

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

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

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

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


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

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

在线提问 在线客服

1 位网友评论:

  • 值品

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

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

欢迎 发表评论: 取消回复

请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合
  • 登 录
  • 注册账号 忘记密码?
  • 注 册
  • 已有账号?直接登录 忘记密码?
  • 社交账号登录