Html 相对于高度限制宽度，反之亦然

使用CSS，我想限制一个维度永远不要超过另一个维度的一个因子

例如，此伪代码：

max-height: (width * 0.75)px;

将确保元素的高度永远不会超过其宽度的75%，但它可能更小

这样的事情可能发生，还是我运气不好

---

编辑：请注意，我并不是要使高度精确到宽度的75%，而是要确保高度不超过75%

CSS不允许基于其他值设置属性，您需要使用另一种方法，例如javascript

下面是一个jQuery示例：

var $elem = $('#elem');
$elem.css('max-height', $elem.width() * 0.75 );

---

您无法设置比率，但始终有

填充底部

div {
  width: 100%;
  padding-bottom: 75%;
}

此代码将
div
设置为4:3的比率

对于16:9的比例，使用填充底部：56.25%

重读后的编辑

如果我建议在div中使用div呢

<div class="a">
  <div class="b">

  </div>
</div>
<style>
.a{
  width:100%;
  padding-bottom: 75%;
  background-color: red;
  position: relative;
}
.b{
  width: 100%;
  max-height: 100%;
  background-color: white;
  position: absolute;
  overflow: hidden;
}
</style>


.a{
宽度：100%；
垫底：75%；
背景色：红色；
位置：相对位置；
}
.b{
宽度：100%；
最大高度：100%；
背景色：白色；
位置：绝对位置；
溢出：隐藏；
}

将内容放在
div.b
中，它将永远不会超过75%
检查此问题：

特别是@Kristijan的回答。您需要调整底部填充物

.some_element {
  position: relative;
  width: 20%;
  height: 0;
  padding-bottom: 20%;
}

如果元素占据整个视口的宽度。您可以执行以下操作：

.class {
  max-height: 75vw;
}

“可能的重复称为长宽比。问题似乎不是保持长宽比，而是不超过某个长宽比，这是不同的。”阿尔瓦蒙托罗，没错。我实际上打算限制两个维度的纵横比。最终，我希望我的div占4:3或16:9，但不要让长宽比比比这两个相差太远。这些是我的终极相对边界框。@Nordenheim我很感激，你仍然没有很好地阅读其他评论或我的原始帖子。我正在寻找控制
最大高度
，如果我只是寻找
高度
，您的解决方案将是正确的。谢谢，这可能会奏效！我试着把我的头绕在它周围，但我想如果父
width
不是100%，这就是最终的目标，这甚至会起作用。非常感谢。这并不能回答问题。我希望将其用作
最大高度
而不是
高度
。如果它是
高度
，你是对的。我猜它总是指整个视口，而不是父元素？虽然我很聪明，但我可能仍然能够使用它，如果没有更好的解决方案，我可能会解决我的问题。你是对的。或者，如果元素也使用vw，或者相对于视口的百分比，则必须执行calc（）或手动设置最大高度。这是一个有效的解决方案，但这样做会更糟糕。这意味着我还必须监听resize事件，以确保它保持准确，并且每当DOM回流时（这是一个相当动态的应用程序）。对于不需要担心的情况，这仍然是一个很好的答案。