Question

我找到了一些链接，如何使用margin / padding技巧（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>

设置元素的宽度，如高度

1 个答案: