Css 使用calc（）根据纵横比创建自动调整大小的图元？

我有一个视频容器，如果我可以使用

calc

根据宽度计算高度，那就太棒了

有一些迹象表明这样的说法是可能的：

.selector{
  width: 100%;
  height: calc(width * 1.75);
}

但我在Chrome 26中还没有看到这种效果。如何仅使用CSS3计算高度？

目前还不真正支持。我想是的

如果需要将其作为一个变量，那么目前应该使用一些CSS预处理器，如Sass、less或Stylus

但是我不确定你是否真的需要宽度作为一个变量。在任何情况下，在纯CSS中，您需要将其作为当前的实际值：

div {
  height: calc(100% * 1.75);
}

将来，我们可以这样做：

div {
  var-height: 100%
  height: calc(var(height) * 1.75);
}

---

使用vh和vw单元是获得固定响应视口的好方法：

.sixteen-nine {
   width: calc(75vh * 1.77);
   height: 75vh;
}

---

这将为您提供一个相对于屏幕高度约为16:9的视口。

有一种方法可以绕过使用calc（）的需要，我认为应该让您知道这一点

您可以将高度设置为零，并使用填充，因为它相对于元素宽度，以创建固定比率

.selector {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom:175%;
}

我经常使用这种技术以响应的方式显示16:9的YouTube视频。要做到这一点，您需要做的就是像这样设置子元素-

.selector .child {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

由于视频（通常）为16/9，您可以
使用简单的钙溶液，同时保持
您的视频或iframe响应

iframe {width: 100%; height: calc(~'100% * 9/16');}

使用和一些CSS变量：

div{
--w:50%；
--比率：2；/*宽度/高度*/
宽度：var（--w）；
填料顶部：计算（var（--w）/var（--ratio））；
背景：#EEE；
外形：1px实心#CCC；
位置：相对位置；
}
/*演示内容，可以是任何内容*/
div：：之前{
内容：“视频”；
字体：700 4vw Arial；
颜色：#AAA；
显示：网格；
放置项目：中心；
/*重要部分：*/
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
}