图片位于< img>尽管设置其大小，标记默认为0 x 0像素 [英] Image in <img> tag is defaulting to 0 x 0 pixels despite setting its size
问题描述
出于某种原因，我无法在 html5 <$ c $内使用< img> 标签设置图片大小c> video 元素。它总是默认返回到 0 x 0像素。
For some reason I'm unable to set the image size when using an <img> tag inside an html5 video element. It is always defaulting back to 0 x 0 pixels.
我使用这个 img 是古代浏览器的后备，视频标签无法正常工作。
The reason I'm using this img is as a fallback for ancient browsers where the video tag just will not work.
这是我的代码注意我故意删除了myVideo.mp4 模仿后备：
Here's my code NOTE I have deliberately removed "myVideo.mp4" to mimic the fallback :
<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）
This produces the following result (when debugging in chrome). Note the "0x0 pixels (Natural: 1920 x 1080)"
有没有人对修复有任何建议？非常感谢
Does anyone have any suggests as to a fix? Thanks v much
推荐答案
我相信这是浏览器隐藏< img> code>，因为Chrome中支持< video> 元素 。例如，如果您在IE8中打开了此内容，则会正确显示后备 < img> 内容。
I believe this is the browser's way of hiding the <img> since the <video> element is supported in Chrome. If you open this in IE8 for example, the fallback <img> content is displayed correctly.
您用于测试回退的条件不正确。移除视频源只会导致浏览器找不到内容（即404）。在这种情况下，正确的回退是使用 poster = markup / video.htmlrel =nofollow> < video> 元素，这不在您的标记中。
The conditions you have used to test the fallback are incorrect. Removing the video source will simply result in the browser not finding the content (i.e. a 404). In this case, the correct fallback is to use the poster="" attribute on the <video> element, which is not in your markup.
海报
UA的图像文件地址视频数据可用
The address of an image file for the UA to show while no video data is available
例如：
For example:
<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）
Full Demo (working for me in 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>
这篇关于图片位于< img>尽管设置其大小，标记默认为0 x 0像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
