正如标题状态,如果我换<video>
“在<div>
容器秒(以进一步增加覆盖),它被设置为relative; inline-block; height:100%;
而<video>
的尺寸为height:100%; width:auto
这一切都很好在初始页面呈现时,但只要调整页面大小,视频就会缩小/增大,但容器的宽度保持不变。集装箱的宽度不缠绕宽度:汽车<video>
这里是你的codepen:http://codepen.io/MaxYari/pen/PqeOQY
只是试图改变窗口的高度,看看我的意思。
换句话说 - 我想制作一个容器,它将围绕<video>
标签进行包装,该标签根据其性质保留其纵横比。
此div视频结构必须适合更大的容器列表。
适合较大的一面,取决于container-list
的方向。即水平的height: 100%
。
单独CSS
当然可以为不同的方向,因此我只是想解决一个案例,假设它将解决这两个问题。
编辑:更新的笔和添加到视频包装的边框,以更好地说明它的无忧。
除非宽度被指定为百分比值,当你调整文件/窗口,它不会改变,我说的是你的课程的容器。 – slash197
@ slash197,但它包裹了调整窗口大小的元素。看起来像一个意想不到的行为,不是吗? 无论如何,解决方法? 有大约'
这里的一个示例性百分比,按预期工作http://jsfiddle.net/slash197/p9Lm2hde/。当dom加载/渲染所有元素具有固定的值大小,并且它们不适应窗口大小调整(子元素具有哪些属性无关紧要)(除非它是百分比)时,这并不意外。 – slash197