集装箱的宽度不缠绕宽度：汽车<video>

正如标题状态，如果我换<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当然可以为不同的方向，因此我只是想解决一个案例，假设它将解决这两个问题。

编辑：更新的笔和添加到视频包装的边框，以更好地说明它的无忧。

来源

2015-07-10 Max Yari

除非宽度被指定为百分比值，当你调整文件/窗口，它不会改变，我说的是你的课程的容器。 – slash197

@ slash197，但它包裹了调整窗口大小的元素。看起来像一个意想不到的行为，不是吗？无论如何，解决方法？有大约'

这里的一个示例性百分比，按预期工作http://jsfiddle.net/slash197/p9Lm2hde/。当dom加载/渲染所有元素具有固定的值大小，并且它们不适应窗口大小调整（子元素具有哪些属性无关紧要）（除非它是百分比）时，这并不意外。 – slash197

在Firefox中，它看起来像你可以只改变display: inline-block;到display: inline-flex;像这样：

Example - 是否在谷歌浏览器不工作;对于一些JavaScript多浏览器解下来看看下面

body, 
 
html { 
 
    height: 100%; 
 
} 
 
#videos { 
 
    position: relative; 
 
    height: 30%; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
} 
 
.video_wrapper { 
 
    height: 100%; 
 
    display: inline-flex; /* see change here */ 
 
} 
 
.video { 
 
    height: 100%; 
 
    width: auto; 
 
}

<div id="videos"> 
 
    <div class="video_wrapper"> 
 
    <video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video> 
 
    </div> 
 
    <div class="video_wrapper"> 
 
    <video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video> 
 
    </div> 
 
</div>

MDN Documentation

Can I use compatibility table

它看起来像要得到它的工作在Chrome是唯一的出路当窗口大小调整时：force a repaint：

Working Example

$(window).resize(function() { 
    $('.video_wrapper').hide().show(0); 
});

浏览器似乎有问题，与流畅的视频，看起来像它有事情做与object-fit property，幸运的你可以解决它通过上述的方法。

来源

2015-07-13 16:37:37 apaul

调整大小的高度 - 同样的行为，视频的收缩，但红色的边框不包木窗周围，而是保持了先前的宽度 –

@MaxYari是你测试的浏览器？ – apaul

最新的谷歌浏览器。我缩小了窗口的高度，视频的高度与水平容器一起变小了，但是它们周围的包装仍然与视频中心的宽度保持相同。 –

您还没有指定任何宽度在视频包装

.video_wrapper { 
    height: 100%; 
    display: inline-block; 
}

添加一个百分比宽度是这样的：

.video_wrapper { 
    width: 100%; 
    height: 100%; 
    display: inline-block; 
}

来源

2015-07-12 22:23:59 ThemesCreator

了我不“T希望，让我们假设，这些视频可以任意纵横比，因此宽度是未知的，但高度必须高度适合集装箱：100％ –

其实只需设置。视频包装是不会保持它的容器。你将不得不为body，html选择器设置最小宽度。使用流体宽度是导致它逃脱容器的原因。

所以新的CSS看起来像

body,html { 
    height: 100%; 
    min-width: 1024px; 
} 
#videos { 
    position: relative; 
    height: 30%; 
    background-color: rgba(0,0,0,0.8); 
} 
.video_wrapper { 
    height: 100%; 
    display: inline-block; 
} 
.video { 
    height: 100%; 
    width: auto; 
}

来源

2015-07-12 23:13:49 Nalani

也许有一些背后的魔力，但似乎，你正试图修复#videos容器的溢出问题，通过设置'min-width'（该问题也可以是固定宽度不可换行和水平滚动）。这不是问题的subjecto这里，我说的是事实，当你缩小窗口的高度'.video_wrapper's保持相同的宽度，但'video'本身收缩;而我需要'.video_wrapper'来缩小'video'。 –

集装箱的宽度不缠绕宽度：汽车<video>

回答

相关问题