SCSS-获取容器宽度作为高度 [英] SCSS - Get container width as height

问题描述

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

Is there a way to get the container width of a child element in calculation of the child element height without using JavaScript.

说，以16：9px长宽比（1.778：1px）渲染图像。
如果我将图像宽度设置为容器的100％。如何将高度设置为

Say, rendering an image in an 16:9px aspect ratio which is 1.778 : 1px. If i set the image width to 100% of the container. How do i set the height to

PSEUDO：

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

我正在尝试使用 calc（）获得100％的值，但不起作用。

I'm trying to get the value of 100% using calc(), but doesn't work.

calc(100% + 1)px;

推荐答案

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

I found it. Sass interpolation does the work. Its possible to use sass interpolation to reference a sibling property.

.container {
  width: 100%;

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

这篇关于SCSS-获取容器宽度作为高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！