按钮始终为正方形，高度可变[重复]答案

【问题标题】：Button always square with variable height [duplicate]按钮始终为正方形，高度可变[重复]
【发布时间】：2019-04-12 05:55:51
【问题描述】：

我正在为 CSS 框架构建一些全局按钮类，我想知道是否有任何方法可以将元素的宽度设置为与高度相同，而无需对其进行硬编码。

这是一个如何工作的示例：

HTML

<button class="button square-button">OK</button>

<div class="container">
    <button class="button large-button square-button">OK</button>
</div>

CSS

.button {
    height: 50px;
    padding: 0 20px;
}

.square-button {
    width: (always-same-as-height);
    padding: 0; // Disable padding so it becomes a square
}

...

.container {
    height: 100px

    .button {
          height: inherit;
    }
}

在某些情况下，我希望能够根据容器高度设置高度，并让所有带有 square-button 类的按钮动态调整到该高度，同时仍保持完美的方形形状。

这可能只使用 CSS 吗？

【问题讨论】：

纯 CSS 不太可能，值得研究像 SASS 这样的工具，因为它允许您创建变量。
预处理器有多精确知道元素的width 是什么，@snack？要求是：“没有硬编码”。变量只是一种奇特的硬编码方式，因为你在一个地方硬拷贝，它会在你使用它的任何地方应用。 OP 似乎想要一个使用 CSS 适应当前元素 width 的解决方案。
我找不到 “纯 CSS” 的正确定义。你能帮我解决这个问题吗？提供一个 “不纯 CSS” 的例子就可以了，只要它有助于消除混淆。

标签： css

【解决方案1】：

您可以使用 CSS 变量模块来实现这一点。但是，浏览器对 CSS 变量的支持并不是那么好。因此，请谨慎行事，首先检查您希望支持的浏览器版本是否已实现 CSS 模块。

【讨论】：