【发布时间】：2016-11-17 19:00:40
【问题描述】：
我想让我的 HTML5 视频框在具有固定宽度的
中垂直和水平居中。棘手的是，当视口的高度或宽度小于视频时，我希望视频缩小以完全适合视口。
当然我想在没有 JavaScript 的情况下完成大小调整。我很好，如果旧版浏览器无法调整大小。
我实际上找到了一个非常好的解决方案（参见下面的代码）。但是我对此感觉很不好，因为基于 WebKit 的浏览器对某些 CSS 的理解不同于 IE 11、10 和 9（而 FireFox 在这两者之上）
为了达到预期的效果，我将视频和外部容器 (#parent) 的最大宽度设置为 100%。
但这不适用于 Internet Explorer 11、10 和 9。看起来 IE 将 #parent video {max-width:100%} 解释为 100% 的视频而不是包含块。因此，视频会从其容器中伸出，并且不会调整大小。但是，如果我设置#parent video {width:100%}，IE 会表现良好。
另一方面，基于 WebKit 的浏览器（Safari、Chrome、新 Opera）需要#parent video {width:auto}。否则，如果视口的垂直尺寸太小希望视频缩小，它们的行为就会不好。 （在我的示例中，您将看到蓝色背景，视频应完全覆盖。）
所以我的问题是：
- 标准怎么说：是 WebKit 还是 IE 正确？或者 FireFox 和 Edge 是否正确，将最大宽度和/或宽度设置为 100%（或两者）都可以？
- 我的代码和目标是否可能与此无关，CSS 有什么可能并且只是偶然？
- 您知道完成此自收缩视频的更好解决方案吗？
这是我的“解决方案”：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
<script type="text/javascript">
document.documentElement.setAttribute('data-useragent', navigator.userAgent);
</script>
<style>
#parent{
position: fixed;
left: 20px; top: 0;
height: 100%; width: 600px;
max-width: 100%; max-width: calc(100% - 40px);
background-color: gray;
display: flex;
align-items: center; justify-content:center;
}
#parent > div {
position: relative;
border: 10px solid white;
background-color:blue;
margin: 30px;
}
#parent video {
display: block;
object-fit: contain;
max-height: calc(100vh - 80px);
max-width: 100%;
width: 100%; /* needed by IE and older browsers (e.g. FireFox 21) */
}
@supports(display:flex){ /* all newer browser (but not IE 11 & IE 10, which have flex but not @supports) */
#parent video {
width: auto; /* needed by Chrome, Safari and new Opera (while FireFox and Edge are also fine with width:100%) */
}
}
#parent div#close {
position: absolute;
right: -17px; top: -17px; width: 20px; height: 20px;
border: 1px solid gray; border-radius: 100%; background-color: white;
}
/* additional styling for older browsers not supporting flexbox */
#parent {
text-align:center;
white-space:nowrap;
}
#parent::after {
display:inline-block;
vertical-align:middle;
content:" ";
height:100%; width:0;
}
#parent > div {
display:inline-block;
vertical-align:middle;
}
html[data-useragent*='Presto'] #parent,
html[data-useragent*='MSIE 10.0'] #parent {
display:block; /* IE10 and old Opera have a broken flexbox implementation */
}
</style>
</head>
<body>
<div id="parent">
<div id="inner">
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"/>
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"/>
</video>
<div id="close">X<div>
</div>
</div>
</body>
</html>
【问题讨论】：
-
那么在 IE 和 Chrome 中，相同的 CSS 工作方式不同，对吧？
-
没错：IE 需要
#parent video {width:100%}，Chrome/Safari/Opera 需要#parent video {width:auto}，而 FireFox 和 Edge 可以同时使用
标签： html css html5-video