如何在 Ionic 2 的纵向模式下为 16:9 纵横比设置高度 div css答案

【问题标题】：How to set height div css for 16:9 aspect ratio in portrait mode for Ionic 2如何在 Ionic 2 的纵向模式下为 16:9 纵横比设置高度 div css
【发布时间】：2017-03-19 16:41:41
【问题描述】：

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

我想要什么：

【问题讨论】：

16:9 也就是说你需要heightwidth这样的比例？
div 16 的宽度（屏幕宽度的 100%）：div 9 的高度
就拿我的答案吧，css解决了

标签： javascript html css typescript ionic-framework

【解决方案1】：

首先：您的源图像必须是 16:9。比你可以简单：

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

div.img {
    height: 100%;
}

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

【讨论】：

如果图像太大，这会扭曲我的图像。我怎样才能适应图像？
但是你得到的是恒定的 16:9 图像比例，不是吗？您还可以在您的 div 上将 max-height: 40% 替换为 height: 40%。浏览器会对大图像进行足够好的重新采样，有些会做得更好，有些则不那么令人满意 - 但您应该考虑一下您的用户带宽并使其更小。

【解决方案2】：

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

56.25% = 16:9 纵横比

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

【讨论】：

我在这里看到了这个概念，但这不是页面的整个视图高度吗？你可以做同样的事情，但与容器 div 相关吗？我的图片缩放比例只有 100% 宽度，但如果图片丢失，高度将设置为与未设置高度值的宽度相同的值。

【解决方案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

希望对你有帮助！！

【讨论】：