有谁知道如何调整 HTML5 视频海报的大小，使其适合视频本身的确切尺寸？
这是一个显示问题的 jsfiddle：http://jsfiddle.net/zPacg/7/ 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%;
}
根据您的目标浏览器，您可以选择对象匹配 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit属性来解决这个问题：
object-fit: cover;
或者可能fill这就是您正在寻找的。仍然正在考虑 IE http://caniuse.com/#feat=object-fit.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
