css - 使 HTML5 视频海报与视频本身大小相同

Question

有谁知道如何调整 HTML5 视频海报的大小，使其适合视频本身的确切尺寸？

这是一个显示问题的 jsfiddle:http://jsfiddle.net/zPacg/7/

这是代码:

HTML:

<video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>​

CSS:

video{
border:1px solid red;
}​

请注意，橙色矩形不会缩放到视频的红色边框。

此外，仅添加下面的 CSS 也不起作用，因为它会随海报一起重新缩放视频:

video[poster]{
height:100%;
width:100%;
}

Answer 1

根据您的目标浏览器，您可以选择 object-fit属性来解决这个问题:

object-fit: cover;

或者 fill 就是您要查找的内容。还是under consideration for IE .