如何创建另一个始终为16:9的html页面的预览

我正在创建一个非常基本的网页编辑器，您可以在其中创建“幻灯片”，然后可以在其他地方显示

为此，我创建了以下页面：

左侧是预览，右侧是编辑器，您可以在其中设置段落的某些属性。基本上两者都是

float：左；
身高：100%；
宽度：50%；
填充：2%；

现在，我希望预览总是以16:9的比例进行，这样可以提供准确的预览

这是我当前的代码

.leftItem{
身高：95%；
宽度：50%；
浮动：左；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.预览{
显示：块；
宽度：90%；
高度：40vh；
边框样式：实心；
边框宽度：1px；
-网络工具包盒阴影：2px2p5px1pRGBA（0,0,0,0.2）；
-moz盒阴影：2px2p5px1pRGBA（0,0,0,0.2）；
盒影：2px2p5px1pRGBA（0,0,0,0.2）；
}

您可以通过在要调整大小的框内的框中添加填充底部来完成此操作。之后，您必须将内容添加到一个单独的子项中，并将其定位为绝对位置，否则新大小的框会将所有内容推出。重要的一点是：

.preview:after {

  display: block;
  content: '';
  padding-bottom: calc(100% / 16 * 9);
  width: 100%;

}

看起来是这样的：

。预览：之后{
显示：块；
内容：''；
填料底部：计算（100%/16*9）；
宽度：100%；
}
.预览.内容{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
}
.leftItem{
身高：95%；
宽度：50%；
浮动：左；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.预览{
位置：相对位置；
显示：块；
宽度：90%；
边框样式：实心；
边框宽度：1px；
-网络工具包盒阴影：2px2p5px1pRGBA（0,0,0,0.2）；
-moz盒阴影：2px2p5px1pRGBA（0,0,0,0.2）；
盒影：2px2p5px1pRGBA（0,0,0,0.2）；
}

谢谢你真的帮助了我：）顺便说一句，当我现在在content div的a中添加一个页边空白顶部时，百分比不起作用，我该如何解决这个问题？@niehoolzz百分比应该起作用，但你应该试着看看填充是否起作用-可能是页边空白崩溃造成的！哦，好吧，那就行了。这是因为边距和填充物总是与一个分区的宽度相比较。。。另外，当高度为100%（与我的问题中的宽度不同）时，我如何将div的比例始终定为16:9@niehoelzz说实话，除了JS之外，我还没有看到一种方法可以做到这一点。