时间戳

首页 > 解决方案 > 如何创建始终为 16:9 的另一个 html 页面的预览

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

问题描述

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

所以为了做到这一点，我创建了以下页面：

我的当前页面

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

float: left;
height: 100%;
width: 50%;
padding: 2%;

现在我希望预览始终保持 16:9 的比例，以便提供准确的预览

这是我当前的代码

<div class="leftItem">
    <div class="leftArrow"></div>
    <div class="preview">
        <!-- Here is the text that gets edited -->
    </div>
    <div class="rightArrow"></div>
</div>

.leftItem {
    height: 95%;
    width: 50%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview {
    display: block;
    width: 90%;
    height: 40vh;
    border-style: solid;
    border-width: 1px;
    -webkit-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
}

标签： htmlcssangular

解决方案

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

.preview:after {

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

}

它看起来像这样：

.preview:after {
  display: block;
  content: '';
  padding-bottom: calc(100% / 16 * 9);
  width: 100%;
}
.preview .content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}


.leftItem {
  height: 95%;
  width: 50%;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview {
  position: relative;
  display: block;
  width: 90%;
  border-style: solid;
  border-width: 1px;
  -webkit-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
}
<div class="leftItem">
    <div class="leftArrow"></div>
    <div class="preview">
        <div class="content">
        <!-- Here is the text that gets edited -->
        </div>
    </div>
    <div class="rightArrow"></div>
</div>

推荐阅读