尽管设置了大小，<img> 标记中的图像默认为 0 x 0 像素
Whe*_*ill 5 html css image html5-video
由于某种原因，在html5<img>元素内使用标签时我无法设置图像大小。它始终默认返回0 x 0 像素。 video
我使用它的原因img是作为视频标签不起作用的古代浏览器的后备。
这是我的代码注意我故意删除了“myVideo.mp4”以模仿后备：
<video id="welcome" height="1080" width="1920" preload="auto" loop autoplay>
<source type="video/mp4" src="@Url.Content("~/_video/myVideo.mp4")" />
<img src="@Url.Content("~/_video/posterframe.jpg")" height="1080" width="1920"/>
</video>
这会产生以下结果（在 Chrome 中调试时）。请注意“0x0 像素（自然：1920 x 1080）”
有人对修复有任何建议吗？非常感谢
我相信这是浏览器隐藏 的方式，<img>因为Chrome 支持该<video>元素。例如，如果您在 IE8 中打开此内容，后备内容将正确显示。 <img>
您用于测试回退的条件不正确。删除视频源只会导致浏览器找不到内容（即 404）。在这种情况下，正确的后备方法是使用元素poster=""上的属性<video>，该属性不在您的标记中。
海报
无视频数据时UA显示的图像文件地址
例如：
<video poster="@Url.Content("~/_video/posterframe.jpg")" id="welcome" height="150" width="150" preload="auto" loop autoplay>
<source type="video/mp4" src="@Url.Content("~/_video/myVideo.mp4")" />
<img src="@Url.Content("~/_video/posterframe.jpg")" height="1080" width="1920"/>
</video>
完整演示（在 Chrome 26 中为我工作）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HTML5 video demo</title>
</head>
<body>
<video id="welcome" height="150" width="100" preload="auto" loop autoplay poster="http://lorempixel.com/150/100/abstract/1/">
<source type="video/mp4" src="http://www.808.dk/pics/video/gizmo.mp4" />
<img src="http://lorempixel.com/150/100/abstract/1/" height="150" width="100" alt="" title="Your browser does not support the <video> tag"/>
</video>
</body>
</html>