object-fit

它指定元素的内容应该如何去适应指定容器的高度与宽度。一般用于图片和视频标签，对这些标签内容进行原始内容比例的裁切和拉伸，缩放。它的属性值和background-size类似。

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

fill也是默认值，他会让使得原图片无法保持原有比例

值	描述
fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain	保持原有尺寸比例。内容被缩放。
cover	保持原有尺寸比例。但部分内容可能被剪切。
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
initial	设置为默认值，关于initial
inherit	从该元素的父元素继承属性。关于inherit

可看具体效果，img标签是100*200的

兼容性

对ie不太兼容，但是在github有对应的polyfill

css3的新属性，由于不太使用，所以不太熟悉，今天来看一下，它是控制默认滚动链（scroll chaining）行为的属性方法。一般见于移动端

overscroll-behavior: auto|contain|none

auto - 默认。元素的滚动会传播给祖先元素。
contain - 阻止滚动链接。滚动不会传播给祖先，但会显示元素内的原生效果。例如，Android 上的炫光效果或 iOS 上的回弹效果，当用户触摸滚动边界时会通知用户。注意：overscroll-behavior: contain 在 html 元素上使用可防止滚动导航操作。
none - 和 contain 一样，但它也可以防止节点本身的滚动效果（例如 Android 炫光或 iOS 回弹）。## scroll chaining 当滚动一个元素到底时，继续往下滚，此时我们期望是不再滚动，但是浏览器默认会让我们滚动元素之外或者上层的元素，这就是滚动链接