html – 使用CSS旋转视频并适合屏幕

发布时间：2020-12-14 19:46:30 所属栏目：资源来源：网络整理

导读：我有以下风格： video { position:absolute; transform:rotate(90deg); width: 100%; height: 100%; z-index:4; visibility : visible;} 这是视频元素这似乎旋转并使视频居中,但它几乎是其大小的四分之一.怎么能让它适合屏幕？最佳答案这是一个新的CSS3单

我有以下风格：

video {
    position:absolute;
    transform:rotate(90deg);
    width: 100%;            
    height: 100%;
    z-index:4;
    visibility : visible;
}

这是视频元素


这似乎旋转并使视频居中,但它几乎是其大小的四分之一.怎么能让它适合屏幕？


最佳答案
这是一个新的CSS3单元派上用场的情况.如果您只是使用普通百分比来指定< video>的宽度和高度如果元素,它们将默认将这些尺寸与其视口对应关联 – 但仅在旋转之前.因此,旋转后,这些值将不再与视口尺寸正确对应.
由于在这种情况下您实际上想要相反,您可以使用height：100vw和width：100vh来明确指定您希望根据视口宽度测量高度,并根据视口高度测量宽度.
使用正确的大小调整,您还需要更改视频旋转的点.否则,很难将视频的边缘与视口的边缘对齐,如此专业制作的可视化示例所示：
在此调整之后,最后一步是将视频向上移动一定量,以使其与视口顶部齐平.这个金额多少钱？嗯,视频的高度 – 我们指定为100vw. (我为此使用了负余量顶部.)
实现这些更改(并设置object-fit：cover以便看不到空格),我们最终得到：

html,body {
  margin: 0; /* Because annoying default browser margins */
}
video {
  position: absolute;
  transform: rotate(90deg);

  transform-origin: bottom left;
  width: 100vh;
  height: 100vw;
  margin-top: -100vw;
  object-fit: cover;

  z-index: 4;
  visibility: visible;
}

希望这可以帮助！如果您有任何疑问,请告诉我.

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!