有谁知道如何调整HTML5视频海报的大小,使其符合视频本身的精确尺寸?

下面是一个JSFIDLE,它显示了这个问题: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;
}​

请注意,橙色矩形没有zoom 到视频的红色边框.

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

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

推荐答案

您可以将透明海报图像与CSS背景图像结合使用来实现这一点(example);但是,要使背景拉伸到视频的高度和宽度,您必须使用use an absolutely positioned <img> tag(example).

It is also possible to set background-size to 100% 100% in browsers that support background-size (example).


Update

更好的方法是按照@Lars Ericsson的建议使用object-fitCSS属性.

使用

object-fit: cover;

如果不想显示图像中不符合视频纵横比的部分,以及

object-fit: fill;

拉伸图像以适应视频的纵横比

Example

Html相关问答推荐

R中的动态Webscraping

如何将grid—template—column应用于元素中的子元素

有没有一种方法可以用css和html在桌面上并排显示列,在移动设备上显示一个下方的列?

放大缩小标题在外面的图像

将CSS应用于TD标记内的div

将网格包装在css中

如何在伪元素背景中定位多个CSS径向梯度

将表格背景图像置于行背景 colored颜色 之上

Firefox和Chrome在文字装饰和文字阴影方面的不同优先顺序

响应网格,响应调整大小以适应父div,保留父div S自己的响应高度

perl hdb 调试器:浏览器以错误的编码显示 UTF-8 源代码

如何使Bootstrap 5卡可点击

并排对齐两个文本区域列

在HTML使用link标签导入外部CSS时出现元素link不允许使用尾斜杠错误

将现有内容拆分为三列或部分

如何截断一些文本并用双引号引起来?

如何使用 CSS 制作蜂窝状网格?

调整大小时 CSS 溢出

打开 Bootstrap 模式时无法获得模糊的背景

如何向上移动图像并溢出图像的一部分而另一部分不溢出