用純HTML 5+CSS3的方法，如何控制Video的視頻與Poster的海報圖片尺寸一致（非視頻原尺寸，比例鎖定）？

嘗試用Video套mp4視頻，做到各種頁面能自適應尺寸，但是苦於無法用Css控制Poster海報的尺寸，目前的狀況是Poster繼承了視頻原尺寸，而視頻能自適應拉伸了。

你的表述＝ ＝，我大概只能理解為你需要一個固定比例的自適應圖片

我有遇到過這個問題，解法如下

Live-demo:fluid but keep aspect ratio image

&
&& &

/* scss 語法 */
#image-wrap {
width: 100%;
height: auto;
padding-bottom: 70%;/* 比例 10 比 7 */
position: relative;
border: 1px solid red;
&> div {
background: url(/path/to/your/image) no-repeat center center;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background-size: 100%;
}
}


如果我沒記錯的話，video標籤的width/height和poster是共用的，說白了poster就屬於video標籤。

但，video自己還有一個videoHeight/videoWidth屬性（我這裡就不翻草案了，樓主做的時候可以看一下），可以通過js來獲取，因此是有辦法根據視頻屬性來調整標籤大小以便適應比例的，具體的做法可以結合 @屹峰 的image-wrap外層來做到工整地擺放多個視頻。

補充一下技術原理：video一般是平台層實現，不同的平台適配的播放器不一樣，所以他們遵循的比例也可能不一樣（也可能可以給用戶選擇比例），所以當video標籤的寬高不能正好匹配videoWidth/videoHeight的時候，播放器會選擇一個默認方式展現，包括：遵循原尺寸補黑邊、遵循原尺寸裁剪、匹配外框拉伸等。而poster則是瀏覽器來實現，類似img標籤，你指定了多少就多少，拉伸。

因此，為了簡單，最好的辦法是video標籤的width/height和video內容的videoWidth/videoHeight匹配，這樣poster的比例就和video一樣了（當然，poster圖片本身的比例你們製作的時候也要遵循原視頻比例，如果剛好不一樣的話，為了保證不變形，你們還需要多加一個裁剪-用css也可以做，這裡不展開）

大致思路這裡幫你整理一下吧:

&
&

&