这个故事区的显示我想让它按照一定的比例，比如 16：9 ... 下面我们再看一下按比例显示容器的样式 ..

先给故事区添加一个样式文件，把它放在 styles 目录的下面，名字是 _story.scss

再打开 main.scss ，把 story 导入进来 ..

回到 story 的样式 .. 添加一个选择器 .ui.story .. 里面可以嵌套一些样式 ..

先设置一下这个容器的背景颜色 ... background: #ededed

我们可以先把里面的文字还有图像元素隐藏起来 .

.content { display: none }
.image { display: none }

让这个 story 容器按比例显示，可以应用一个特定百分比的内边距 ..

这里我们需要一个伪元素 .. ::before ... &::before .. css3 里面，伪元素前面有两个冒号 .. 之前我们在卡片组件上用过一个 after ...

这里用了一个冒号 .. 这是 css2 的写法 .. 我们可以改一下，再添加一个冒号 ..

回到 story 的样式 .. 在这个 story 元素的 before 伪元素里面，先用 display ，把它设置成一个块级元素 ... block

再添加一个 content 设置一下元素里的内容，先用一个空白 ...

width 的值是 100% ... 再应用一个 padding-top ... 它的值是一个特定的百分比 ...

这个百分比可以计算一下 ... 比如我想让它的显示比例是 16：9 ... 这个百分比应该就是 9 除以 16 ... 再乘以 100% ... 结果是 56.25 ..

把这个 paddint-top 的值设置成 56.25 ..

现在，这个 story 容器的显示比例就会一直是 16:9 了 ...

回到样式 .. 去掉 content 里面的 display:none ..

这个 content 是 story 的一个子元素， 让它显示在这个 story 容器里面，我们得把它设置成绝对定位 ...

position: absolute;

它里面的 top ，left，right，还有 bottom 这些位置属性的值都要设置成 0 ...

然后让它相对于 story 元素绝对定位，所以，我们还得设置一下 story 的 position 属性，值是 relative ..

再去预览一下这个 story ...

这个容器会按 16：9 的比例显示 ... 里面的内容也会正常的显示 ..