javascript - 如何在 Ionic 2 中为纵向模式设置 16:9 宽高比的 div 高度 CSS

假设我有一个位于 ion-content 上方的 div。我想通过获取设备的宽度来设置 div 的高度，并计算出使其纵横比为 16:9，就像 YouTube 应用一样。然而，我不知道如何使用 CSS 实现这一点。目前，我的代码是这样的。

div {
    width: auto;
    max-height: 40%; <-- how to set this height so that it is 16:9 
    background: black;

div.img {
    width: 360px;
    max-height: 202.5px;
}

我想要的：

答案＃1

你只需要使用这个简单的 CSS 样式

56.25%=16:9 宽高比

.img {
    width: 100%;
    height: 56.25vw;
}

答案＃2

首先：你的源图片需要是16:9。然后你可以像这样简单地：

div {
    width: auto;
    max-height: 40%;
    background: black;

div.img {
    height: 100%;
}

当然，如果那个 css 对应于一个正确嵌套的 <div><img...></div> 结构。