使用 CSS 调整元素大小？

Question

您可以根据 parent 的宽度调整元素的宽度，但是可以根据 parent 的高度调整元素的宽度吗？（不使用视口变量）

CSS: "width=90% parent 的身高" ??

Width:90%;

此应用程序通过设置元素的宽度和高度仅相对于 parent 元素的高度而不是宽度来保持自适应布局中的纵横比。由于浏览器支持参差不齐，我正在尝试不使用像 'vw' 或 'vh' 这样的视口变量的解决方案。

对 jquery 持开放态度，但希望尽可能避免...

Answer 1

您将 body 或 html 标签设置为 100% 的高度和宽度，这对于整个文档来说与 vh 和 vw 完全一样。 parent 必须有一些预定义的高度和宽度值，以便 children 可以采用您希望它们具有的形式。

例子。

body {
  display: flex;
  justify-content: center;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent {

  width: 500px;
  height: 500px;
  border: 1px solid black
}
.child1 {

  width: 75%;
  height: 75%;
  border: 1px solid blue;

}

.child2{
  width: 50%;
  height: 50%;
  border: 1px solid red;

}

span{
  display: flex;
  align-self: baseline;
  position: absolute;
}

    <div class="parent">
      <span>parent</span>
      <div class="child1">
        <span>child1</span>
        <div class="child2">
          <span>child2</span>
        </div>
      </div>
    </div>

使用 CSS 调整元素大小？

Use CSS To Resize Elements?

html

css

jquery

resize

viewport