css - 使用 calc() 根据纵横比创建自动调整大小的元素？

Question

我有一个视频容器，如果我能用它calc来根据宽度计算高度，那就太好了。

有一些stackoverflow答案的暗示声称这样的事情是可能的：

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

但我还没有在 Chrome 26 中看到过这样的工作。如何仅使用 CSS3 计算高度？

Answer 1

有一种方法可以绕过我认为我应该让你知道的使用 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%;
}

Answer 2

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

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

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

Answer 3

目前还没有真正支持CSS 变量。我认为他们在 WebKit 中工作。

如果你需要它作为一个变量，你现在应该使用一些 CSS 预处理器，比如 Sass、less 或 Stylus。

但我不确定您是否真的需要将宽度作为变量。在任何情况下，在纯 CSS中，您现在都需要它是一个真正的值：

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

将来，我们可以这样做：

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

Answer 4

由于视频（通常）是 16/9，您可以
使用简单的计算解决方案，同时保持
视频或 iframe 响应。

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

Answer 5

使用padding技巧和一些 CSS变量：

div{
 --w: 50%;
 --ratio: 2; /* width / height */
 
  width: var(--w);
  padding-top: calc(var(--w)/var(--ratio));
  
  background: #EEE;
  outline: 1px solid #CCC;
  position: relative;
}

/* Demo content, could be anything */
div::before{
  content: "VIDEO";
  font: 700 4vw Arial;
  color: #AAA;
  display: grid;
  place-items: center;

  /* important part: */
  position: absolute;
  top:0; right:0; bottom:0; left:0;
}

<div></div>