集裝箱的寬度不纏繞寬度：汽車<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>

回答

相關問題