设置元素的宽度，就像它的高度一样

Question

我找到了一些链接，如何使用边距/填充技巧 (http://www.mademyday.de/css-height-equals-width-with-pure-css.html) 设置元素的高度，例如其宽度。但是我想设置一个元素的宽度，比如它的高度。

.container {
  display: flex;
  margin: 20px;
  height: 50px; /* changing this value ... */
  width: 300px;
}

.label {
  flex: 1;
  background: green;
}

.icon {
  height: 100%;
  width: 50px; /* <- ... should set this value to the same size */
  background: red;
}

http://jsbin.com/melurilefe/edit?html,css,output

因此元素的高度为 100%，当其父元素的高度从 50px 变为 100px 时，元素的宽度应反映该大小，因此它始终保持为正方形。

仅使用 CSS 可以吗？谢谢！

Answer 1

据我所知，没有仅使用 CSS 的动态解决方案。

如果您想更轻松地更改值（但它不是动态的），您可以做什么

使用 CSS 变量 。为该变量设置一个值，并将其用于两个元素的 with 和 height 。当您更改该变量的值时，宽度和高度都会发生变化

否则，您需要使用诸如 javascript/jQuery 之类的东西来获得取决于父高度的宽度

见下文

:root {
  --height-width: 50px;
}


.container {
  display: flex;
  margin: 20px;
  height: var(--height-width); /* changing this value ... */
  width: 300px;
}

.label {
  flex: 1;
  background: green;
}

.icon {
  height: 100%;
  width: var(--height-width); /* <- ... should set this value to the same size */
  background: red;
}

  <div class="container">
    <div class="label">Hey</div>
    <div class="icon">i</div>
  </div>