时间戳

首页 > 解决方案 > 保持无法创建垂直滚动条且无法剪辑的纵横比框

html - 保持无法创建垂直滚动条且无法剪辑的纵横比框

问题描述

问题： 如何确保我的视频保持纵横比 (16x9) 并且不会在非常小的高度视口上创建滚动条，而不是剪辑。

重新创建：

使用底部边缘使浏览器窗口变得非常宽和非常短，您将看到窗口现在有一个滚动条。

.wrapper {
  background: green;
  height: 100%;
  width: 50%;
  margin: 0 auto;
  
}
.video {
  background: red;
  overflow: hidden;
  max-height: 0;
  padding-top: 56.25%;
}
  <div class="wrapper">
    <div class="video">123</div>
  </div>

标签： htmlcss

解决方案

您可以考虑max-width基于vh单位定义的 a：

.wrapper {
  background: green;
  height: 100%;
  width: 50%;
  margin: 0 auto;
  max-width: 160vh; 
  /* the 56.25% of this value should be less or equal to 100vh considering margin/padding/border
  
    In this case with 8px of body margin the max value should be:
     calc((100vh - 16px)*100/56.25)   
  */
}

.video {
  background: red;
  overflow: hidden;
  max-height: 0;
  padding-top: 56.25%;
}
<div class="wrapper">
  <div class="video">123</div>
</div>

推荐阅读