首页 | Blogs | 项目合集 | Bilibili↗
←返回 | 创建：2024-06-05 | 最后更新：2024-06-05

最近在写html项目的时候，想要锁定宽高比，并且居中。
这就是说，某个<div>控件要：

• 占满显示区域宽度
• 保证宽高比

而百度给出的结果是使用padding-top来控制
然后吗……就完美的奇怪起来

最后研究出来只需要使用calc()就可以啦

.main{
  top: calc((100vh - (100vw * 0.5625)) / 2);
  left: 0;
  width: 100vw;
  height: calc(100vw * 0.5625);
}

这里就是让控件左靠齐、宽度为显示区域宽
而高度则是宽度的56.25%（对应16:9）、上边则是页面高居中

完美！

另外：阻止子元素超出父元素，只需要在父元素里加上

clip-path: inset(0 0 0 0);

然后还需要考虑下不同media的显示区域

最终结论

/* 需求媒体查询4 */
/* 若不生效，请升级浏览器到最新版本 */
@media screen and (height < calc(100vw * 0.5625)) {
  .generalFrame {
    /* 若高度不够则高度占满 */
    top: 0;
    left: calc((100vw - (100vh / 0.5625)) / 2);
    width: calc(100vh / 0.5625);
    height: 100vh;
    scrollbar-width: none;
    overflow：hidden;
  }
} 

@media screen and (height >= calc(100vw * 0.5625)) {
  .generalFrame {
    /* 否则占满宽度 */
    top: calc((100vh - (100vw * 0.5625)) / 2);
    left: 0;
    width: 100vw;
    height: calc(100vw * 0.5625);
    scrollbar-width: none;
    overflow：hidden;
  }
}