Question

我需要将元素的宽度维持为高度的百分比。因此，随着高度的变化，宽度会更新。

相反的情况可以通过使用填充顶部的％值来实现，但填充左边的百分比将是对象宽度的百分比，而不是其高度。

所以使用这样的标记：

<div class="box">
  <div class="inner"></div>
</div>

我想使用这样的东西：

.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}

确保框的宽高比根据其高度进行维护。高度是流动的，因为它有百分之百的余量 - 随着窗户的高度变化，箱子的高度也会变高。

我知道如何使用JavaScript实现这一点，只是想知道是否有一个干净的CSS解决方案？

Answer 1

您可以使用具有所需比例的图像来帮助进行比例尺寸调整（可以通过将一个尺寸设置为某个值而将其他尺寸设置为自动来按比例缩放图像）。图像不一定是可见的，但必须占用空间。

.box {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
}
.size-helper {
  display: block;
  width: auto;
  height: 100%;
}
.inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 153, .8);
}

<div class="box">
  <img class="size-helper" src="//dummyimage.com/200x100/999/000" width="200" height="100">
  <div class="inner">
    1. box has fluid height<br>
    2. img has 2:1 aspect ratio, 100% height, auto width, static position<br>
    2.1 it thus maintains width = 200% of height<br>
    2.2 it defines the dimensions of the box<br>
    3. inner expands as much as box
  </div>
</div>

在上面的例子中，box，inner和helper都是相同的大小。

Answer 2

您可以对元素的高度和宽度使用vh单位，以便根据视口高度进行更改。

<强> VH 视口高度的1/100。（MDN）

<强> DEMO

.box {
    position: absolute;
    height:50vh;
    width:100vh;
    bottom: 0;
    background:teal;
}

<div class="box"></div>

Answer 3

您编写的CSS技巧非常适用于保持元素width / height的比例。它基于padding属性，当其值为百分比时，即使对于padding-top和padding-bottom，也与父宽度成比例。

没有CSS属性可以按比例设置父级高度的水平大小。所以我认为没有干净的CSS解决方案。

Answer 4

还有另一种更有效的方法来实现根据高度的恒定长宽比。

您可以放置一个空的svg，这样就不必加载外部图像。

HTML代码：

    <svg xmlns="http://www.w3.org/2000/svg"
      height="100"
      width="200"
      class='placeholder-svg'
    />

CSS代码：

.placeholder-svg {
  width: auto;
  height: 100%;
}

更改宽度/高度以实现所需的宽高比。

请记住，svg可能会溢出。

http://www.w3.org/2000/svg只是一个名称空间。它不会加载任何东西。

如果您将placeholder-svg类更改为：

.placeholder-svg {
  width: 100%;
  height: auto;
}

然后根据宽度调整高度。

Demo 1的宽度是根据高度和2：1的纵横比进行调整的。

Demo 2与上述相同，但您可以轻松调整大小（使用React）

Answer 5

我无法找到纯CSS解决方案。这是使用CSS Element Queries JavaScript库的解决方案。

var aspectRatio = 16/9;
var element = document.querySelector('.center');
function update() {
  element.style.width = (element.clientHeight * aspectRatio) + 'px';
}

new ResizeSensor(element, update);
update();

CodePen demo!

Answer 6

自 2021 年起，有一个名为 aspect-ratio 的新属性。 Most browsers already support it

div {
    border: 1px solid;
    margin: 8px;
}

.box {
    width: 100px;
    min-height: 100px;
    resize: horizontal;
    overflow: auto;
}

.inner1 {
    aspect-ratio: 1/1;
}

.inner2 {
    aspect-ratio: 3/1;
}

<div class="box">
  <div class="inner1"></div>
  <div class="inner2"></div>
</div>

运行此代码段并手动调整外部 div 的大小以查看内部 div 行为

根据高度保持div纵横比

6 个答案: