如何创建一个中心，<div>如果它不适合视口，它会自动缩小？

我想让我的HTML5视频框垂直和水平居中在

宽度固定。棘手的事情是，我希望视频缩小到完全适合viewport，当viewport的高度或宽度小于视频。

当然，我希望在没有JavaScript的情况下完成大小调整。我很好，如果旧的浏览器不能做调整大小。

我发现了一个很好的解决方案(见下面的代码)。然而，我对它有一种非常不好的感觉，因为基于webkit的浏览器对某些CSS的理解与ie11、ie10不同。9

为了达到预期的效果，我将视频和外部容器(#parent)的max-width设置为100%。

但是这不适用于Internet Explorer 11, 10 &9. 看起来IE将#parent video {max-width:100%}解释为100%的视频，而不是包含块。结果，视频从它的容器中伸出来，不调整大小。然而，如果我设置#parent video {width:100%}, IE表现良好。

基于webkit的浏览器(Safari, Chrome, new Opera)则需要#parent video {width:auto}。否则，如果视口的垂直尺寸太小，想要缩小视频，它们就会表现得不太好。(在我的例子中，你将看到蓝色的背景，它应该完全被视频覆盖。)

我的问题是:

标准怎么说:是WebKit还是IE正确?或者FireFox和Edge是正确的，它们可以将max-width和/或width设置为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>

这是一个小提琴https://jsfiddle.net/6vu42zxr

我所理解的是你有IE和Webkit浏览器的CSS问题。为什么不把IE浏览器的CSS分开呢?这将只针对IE浏览器。因此，你将有单独的CSS为IE和chrome和其他浏览器。

针对所有版本的IE仅CSS:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

除了IE浏览器:

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

目标IE 7 ONLY浏览器:

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

目标IE 6 ONLY浏览器:

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

适用于ie8及以下浏览器:

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

为什么要使用条件样式表?

保持你的代码不受黑客攻击和有效。
保持主样式表的整洁。
易于编辑IE仅CSS和维护。

相关内容

最新更新

热门标签：