高级CSS - 不理解这个解决方案

我已经成功地获得了一个视频，正确适合div内部并且一直填满它，这要归功于这个SO answer。高级CSS - 不理解这个解决方案

我已经修改了一下代码，但我很难理解为什么这段代码能够正常工作。

video 
     position: absolute 
     opacity: 0.1 
     z-index: 0 
     top: 0px 
     left: 50% 
     min-width: 100% 
     min-height: 100% 
     right: 0px 
     margin: auto 
     width: auto 
     height: auto 
     overflow-x: hidden 
     transform: translateX(-50%)

我没有得到什么改变没有，以及如何得到它固定到比左上角以外的东西。我认为有一些关于min-的属性可以使这项工作成功，但我不确定。

来源

2016-05-14 inthenameofmusik

的'transform'与'left'属性结合是一种强制可变宽度的元件为中心。首先，您从容器左侧走50％到达容器中心，然后您返回50％（负X），其中50％代表视频元素宽度的50％。通常情况下，'margin：auto'会以一个元素为中心，但是这个元素需要是一个固定的宽度。该策略允许它处理未知或宽度变化的元素。 – Quantastical

绝对定位的元素相对于其父元素（也可以是浏览器窗口）的位置由顶部或底部以及左侧或右侧参数定义（默认为top：0; left：0;）。如果左边是50％，则意味着左边框完全移动到容器的水平中间。 transform: translateX(-50%)将它移回左侧（由负值引起）50％，但这次是元素本身的50％。这导致元素水平居中居中。 overflow-x: hidden;确保元素不与其容器重叠 - 溢出的部分将保持不可见。

你可以做同样的垂直top 50%; transform: translateY(-50%); overflow-Y: hidden;

来源

2016-05-15 00:23:44 Johannes

高级CSS - 不理解这个解决方案

回答

相关问题