SCSS - 获取容器宽度作为高度

Question

有没有一种方法可以在不使用 JavaScript 的情况下在计算子元素高度时获取子元素的容器宽度。

比如说，以 16:9px 的纵横比渲染图像，即 1.778:1px。如果我将图像宽度设置为容器的 100%。我如何将高度设置为

伪：

$width: 100%;
height: (100% * 0.5625)px;

我试图使用 获得 100% 的值calc()，但不起作用。

calc(100% + 1)px;

Answer 1

我找到了。Sass 插值可以完成这项工作。可以使用 sass 插值来引用同级属性。

.container {
  width: 100%;

  img {
    width: 100%;
    height: calc(#{width} * 1.778);
  }
}