css实现一个宽高固定百分比的布局的一个方式

剪刀石头布啊2026-02-08 21:36

如果说要实现一个固定百分比布局，有不少方案，但大多数是针对于一个固定的值进行计算宽高的，搭配js非常的方便，如果要使用纯css的话有什么好的相对简单的办法呢

当然实际不推荐直接这么用，可以根据情况使用最合适的方法，这里只是提供一种思考思路，也就是css的一些特性，能让我们有更多方式实现同一种效果

这里使用padding-top、padding-bottom 的百分比，相对于父节点宽度百分比的思路来实现

js 复制代码

function App() {
  return (
    <div className="App">
    </div>
  );
}

cs效果如下所示

js 复制代码

.App {
  padding-top: 50%;
  height: 0;
  width: 100%;
  background-color: red;
}

这样就实现了一个宽高固定百分比的方案，搭配一个简单的reactive、absolute 就可以轻松实现内容百分比展示、

当然有些场景使用 calc 直接计算也行，配合js、css变量更不多说了，方法多得很，看怎么操作