Css iOS7上Safari中HTML5视频海报图像边缘的黑条

我已将海报图像添加到视频中，其尺寸与视频容器本身完全相同：

我的HTML如下所示（故意不指定宽度和高度，因为我希望视频通过浏览器调整大小，而不是保持固定）：

但是，当在iOS7（iPhone 5S和iPad Mini）的Chrome或Safari中查看此内容时，海报图像的左右两侧都有黑色条：

试图在此处发布一个图像链接，但它说我需要至少10个声誉，才能发布2个以上的链接-你只需在我的Flickr网站上找到该图像（请参阅前两个超链接）

如果我专门为视频元素设置了宽度和高度，那么这个问题就会消失：

<video controls width="320" height="180"
       src="mov/MVI_1880.mp4" 
       poster="mov/MVI_1880_poster.JPG">
</video>

试图在此处发布一个图像链接，但它说我需要至少10个声誉，才能发布2个以上的链接-你只需在我的Flickr网站上找到该图像（请参阅前两个超链接）

但我想避免这种情况，因为在调整视口大小时，视频将保持固定大小

我曾尝试在css中设置自动高度，但没有改变

还值得注意的是，这在我的桌面上的Chrome中工作良好（即，我在HTML中没有指定宽度或高度，在CSS中宽度为100%），并且海报图像的大小正确到视口的全宽：

试图在此处发布一个图像链接，但它说我需要至少10个声誉，才能发布2个以上的链接-你只需在我的Flickr网站上找到该图像（请参阅前两个超链接）

---

非常感谢您的帮助。

您的图像似乎有这些黑条？没有，图像没有黑条。如果您查看“视频海报文件信息”链接，您应该会在“我的文件夹”的左下角看到图像预览。也许你指的是.mp4文件本身的第一个链接？它看起来确实像黑色的条带，但这正是Windows对缩略图所做的，使其看起来像电影胶片。

img, video{
        width: 100%;
}

<video controls width="320" height="180"
       src="mov/MVI_1880.mp4" 
       poster="mov/MVI_1880_poster.JPG">
</video>