Html 使用vh避免自动宽度最大高度柔性CSS布局中的字母装箱

这有点难以解释，但我试图在我的页面中调整SVG的大小，以便它可以根据容器的宽度增加宽度，但前提是它不超过页面vh的某个百分比。这一部分是可行的，但我也尝试使用一个侧栏来进行布局，并且每当SVG中引入“最大高度”限制时，就会引入左右填充，而我希望在这种情况下布局尽可能紧凑，避免SVG的“字母装箱”

SVG的要求如下：

• 保持纵横比
• 使用100%的容器宽度，但不要超过给定的最大高度
• 当高度受到限制时，减小（元件的）宽度

#容器{
宽度：800px；
保证金：0px自动；
文本对齐：居中；
背景：AAAAA；
}
#弯曲{
显示：内联flex；
对齐项目：拉伸；
背景：红色；
}
#主要{
弹性增长：1
}
svg{
背景：绿色；
宽度：100%；
最大高度：75vh；
}
#边栏{
背景：蓝色；
颜色：白色；
最小宽度：100px；
}

边栏

您可以设置纵横比属性，而不是设置最大高度，例如

aspect-ratio: 29 / 23;

（因为

SVG

的

viewBox

值是

0870690

）

这是一个新的且仅部分受支持的属性。如果您需要确保与所有浏览器兼容以保持纵横比（所有浏览器都将涉及

填充顶部

，在您的情况下，其值将为

calc（100%*23/29）

或79.31%）

如果需要根据高度调整SVG的大小，请尝试设置

svg {
  background: green;
  max-height: 75vh;
  width: 100%;
  max-width: calc(75vh * 23 / 29);
}

只需向SVG添加“一些”维度（一般来说这是一个好主意），这样它就可以获得适当的纵横比；最佳使用它的viewBox值：

 <svg viewBox="0 0 870 690" width="870" height="690">

或者，如果可以使内容变形，使其在任何纵横比下都可见：

<svg preserveAspectRatio="none" ...>

谢谢。我用钢笔中建议的

纵横比

替换了

最大高度

，但现在SVG的高度并没有随着窗口高度而降低。运行ChromeI已经用期望的行为更新了问题-希望这能满足需求clearer@jugglingcats我编辑了我的答案，希望它能帮上忙使用

preserveAspectRatio

的问题是SVG会被上下裁剪，宽度保持不变，虽然我希望SVG在应用垂直高度限制时减小宽度设置宽度和高度也不允许在应用vh限制时减小宽度，但字母盒仍然存在。当有更多的垂直空间可用时，SVG也不允许宽度增加。我看，在谷歌浏览器中，是吗？它的行为真的很奇怪。在Firefox和pre-Chromium Edge中，SVG构成flex项的宽度，因此需要时flex会缩小到800px以下，但在基于Chromium的浏览器中，flex总是占据这些800px。

<svg preserveAspectRatio="none" ...>