详解css3 object-fit属性

  发布时间:2018-07-27 15:35:44   作者:佚名   我要评论

这篇文章主要介绍了css3 object-fit属性,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

上传头像的时候遇到了头像变形的问题,最后通过object-fit: cover完美解决了。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。

object-fit 理解

CSS3 background-size出现的比较早,大家应该知道其支持的一些值,除了数值之外,其还支持几个关键字,例如:cover, contain等。

object-fit也是类似的,但还是有些差异,具体有5个值:

.fill { object-fit: fill; }

.contain { object-fit: contain; }

.cover { object-fit: cover; }

.none { object-fit: none; }

.scale-down { object-fit: scale-down; }

每个属性值的具体含义如下(自己理解的白话文,官方释义见官网):

  • fill: 中文释义“填充”。 默认值 。替换内容拉伸填满整个 content  box, 不保证保持原有的比例。
  • contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。
  • cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如 图片 )部分区域不可见。
  • none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
  • scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
     

object-fit 属性测试

下面我们来测试一下每一个属性值显示的效果每个img标签都设置的 width:200px 和 width:200px,再加上设置的object-fit属性的不同值,效果图如下:

 

object-fit 兼容性

 

总结

以上所述是小编给大家介绍的css3 object-fit属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 纯css3实现思维导图样式示例

    思维导图又称之为脑图,本篇文章主要介绍了使用css3实现思维导图样式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-01
  • CSS3 Flex 弹性布局实例代码详解

    这篇文章主要介绍了CSS3 Flex 弹性布局实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-11-01
  • CSS3 创建网页动画实现弹跳球动效果

    这篇文章主要介绍了CSS3 创建网页动画实现弹跳球动效果,需要的朋友可以参考下
    2018-10-30
  • css3实现椭圆轨迹旋转的示例代码

    这篇文章主要介绍了css3实现椭圆轨迹旋转的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-29
  • css3绘制百度的小度熊

    本文通过实例代码给大家分享基于css3绘制百度的小度熊,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-29
  • 详解css3 mask遮罩实现一些特效

    遮罩mask的功能就是使用透明的图片或渐变遮罩元素的背景。这篇文章主要介绍了详解css3 mask遮罩实现一些特效,详细的介绍了mask的属性以及一些常用示例,感兴趣的小伙伴们
    2018-10-24
  • 纯css3实现宠物小鸡实例代码

    最近看了很多关于css3的知识和文章,觉得css3用起来很方便,使用css3的话,在页面布局上可以省去很多不必要的代码。下面小编给大家带来了纯css3实现宠物小鸡的相关知识,感
    2018-10-08
  • 使用纯 CSS 创作一个脉动 loader效果的源码

    这篇文章主要介绍了使用纯 CSS 创作一个脉动 loader效果的源码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-28
  • 基于CSS3实现的几个小loading效果

    这篇文章主要介绍了CSS3实现的几个小loading效果 ,需要的朋友可以参考下
    2018-09-27
  • CSS3 background-image颜色渐变的实现代码

    这篇文章主要介绍了CSS3 background-image颜色渐变的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-13

最新评论