如何在纵向模式下为Ionic 2设置16：9宽高比的高度div css

Question

假设我有一个位于离子含量之上的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;
}

我想要的是什么：

Answer 1

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

56.25％ = 16：9宽高比

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

Answer 2

首先：你的源图像需要是16：9。 比你简单：

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

div.img {
    height: 100%;
}

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

Answer 3

¿你能把图像设置为背景图像吗？在这种情况下，你可以使用它：

HTML：

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

CSS：

.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;
}

您可以在此处看到它：Codepen

希望它有所帮助!!