Javascript 如何在Ionic 2的纵向模式下为16:9纵横比设置height div css

假设我有一个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;
}

div{
宽度：自动；
最大高度：40%；首先：源图像必须为16:9。
您可以简单地：

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

div.img {
    height: 100%;
}

当然，如果css对应于正确嵌套的
结构。
您只需要使用这个简单的css样式

56.25%=16:9纵横比

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

？您能将图像设置为背景图像吗？在这种情况下，您可以使用：

HTML：

<div class="container">
  <div class="header" style="background-image: url(https://placehold.it/1200x600)">
  </div>
  <div class="content">Content here</div>
</div>

在这里，您可以看到它的作用：

希望有帮助！！
16:9这意味着您需要
高度
宽度
这样的比例？div 16的宽度（屏幕宽度的100%）：div 9的高度只需接受我的答案，由CSST解决。如果图像太大，则会扭曲我的图像。我如何拟合图像？但你得到的图像比例是恒定的16:9，不是吗？你也可以将div上的
最大高度：40%
替换为
高度：40%
。浏览器将足够好地重新采样大图像，有些会做得更好，其他，没有那么令人满意-但你应该考虑到你的用户带宽，并将其缩小。我在这里看到了这个概念，但这不是页面的整个视图高度吗？你可以做同样的事情，但与容器div有关吗？我的图片缩放效果很好，只有100%的宽度，但是如果一张图片缺少，高度会设置为相同的v值作为未设置高度值的宽度。
.container {
  width: 960px;
  max-width: 90%;
  margin: 20px auto;
  border: 1px solid #ddd;
}

.header {
  position: relative;
  width: 100%;
  padding-top: 56%;
  background-color: rgba(#f00,0.1);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  overflow: hidden;
}

.content {
  padding: 30px;
}