在 Sass 中，我们如何根据宽度的值分配高度？ [复制]

Posted 2023-03-06

【中文标题】在 Sass 中，我们如何根据宽度的值分配高度？ [复制]

【英文标题】：In Sass, how do we assign height based on a width's value? [duplicate]

【发布时间】：2014-03-01 03:18:03

【问题描述】：

我正在尝试根据浏览器的宽度值为元素的高度分配一个值。例如（我想要完成的是在双斜杠之间）...

.myDiv 
  width: 35%;
  height: // width * 1.61 //;

如何做到这一点？

【问题讨论】：

我怀疑这可以专门用 SASS 完成，因为在页面呈现之前我们不会知道 35% 的计算结果。但这可能会有所帮助：***.com/questions/5445491/…

@cimmanon，它不是重复的。我的问题与 SASS 有关。

@ayjay 所以 Sass 不再编译为 CSS 了吗？ Sass 必须在浏览器看到之前编译成 CSS。你如何判断 Sass 会知道特定元素的宽度是多少？

@cimmanon，我正在想办法使用 SASS 的数学能力。但我想，现在想想，这行不通。

【参考方案1】：

仅供参考：

width 属性使用百分比值是指页面呈现时容器块的宽度。

而对于height 属性：

百分比是相对于高度计算的 生成框的包含块。如果包含的高度 块没有明确指定（即，它取决于内容 高度），并且该元素不是绝对定位的，该值 计算为自动。根元素上的百分比高度是相对的 到初始包含块。 - MDN.

因此，即使您可以使用 SASS 实现此目的，它也无法在浏览器上正常工作。

在 SO 上有几个解决方案，以保持盒子的纵横比：

Responsively change div size keeping aspect ratio Height equal to dynamic width (CSS fluid layout) Maintain the aspect ratio of a div with CSS Keep div height relevant to aspect ratio

【讨论】：

所以你回答不回答？没有。

@Julian 从技术上讲，答案是正确的：你不能用 height 属性来做到这一点。但是，它没有回答问题（无论如何都是重复的）。

@cimmanon 我删除了我的反对票，但我认为“没有答案”应该放在 cmets 中，而不是作为答案。我们都指出了真正解决问题的答案——也许不是 OP 所设想的那样，但应该比这个“答案”更有帮助。

它没有回答问题，但它可以帮助将 OP 指向正确的方向。我发布这个是为了提到规范，我无法通过评论来解释。

@HashemQolami 重复问题应作为重复问题关闭。

【参考方案2】：

您可以将 padding-bottom 应用为百分比。然后在 div 中放置一个绝对位置的元素。

【参考方案3】：

你为什么不能这样做？

.myDiv 
  $width: 35%;
  width: $width;
  padding-bottom: ($width * 1.61)

当然，您需要确保 .myDiv 相对于页面定位，换句话说，不包含在另一个具有位置属性的元素中。

正如@NathanDawson 建议的那样，如果您需要适当的高度，您还可以在 myDiv 中放置另一个 DIV 并将高度设置为 100%。