Question

我有一个视频容器，如果我可以使用calc根据宽度计算高度，那就太棒了。

stackoverflow answers有些人声称这样的事情是可能的：

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

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

Answer 1

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

java.util.logging.Logger

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

Answer 2

有一种解决方法可以避免使用我认为应该让你知道的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 3

目前还没有真正支持CSS variables。我认为他们work in WebKit。

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

但我不确定你是否真的需要宽度作为变量。无论如何，在 plain CSS 中，你需要它才能成为真正的价值：

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

将来我们可以这样做：

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

Answer 4

由于视频通常是16/9，所以您可以
保留时使用简单的calc解决方案
您的视频或iframe自适应。

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

Answer 5

使用padding trick和一些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>

使用calc（）根据纵横比创建自动大小的元素？

5 个答案: