html - 使用 vh 避免在 auto-width max-height flex CSS 布局中出现 letterboxing

问题描述

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

SVG 的要求是：

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

#container {
  width: 800px;
  margin: 0px auto;
  text-align: center;
  background: #aaaaaa;
}

#flex {
  display: inline-flex;
  align-items: stretch;
  background: red;
}

#main {
  flex-grow: 1
}

svg {
  background: green;
  width: 100%;
  max-height: 75vh;
}

#sidebar {
  background: blue;
  color: white;
  min-width: 100px;
}

<div id="container">
  <div id="flex">
    <div id="main">
      <svg viewBox="0 0 870 690">
        <rect x="0" y="0" width="100%" height="100%" fill="purple" />
      </svg>
    </div>
    <div id="sidebar">
      SIDEBAR
    </div>
  </div>
</div>

密码笔

不超过垂直高度限制时查看：

查看垂直高度限制生效时：

我想避免使用绿色垂直条，让 SVG 和侧边栏占用更少的水平空间，但仍然在它们的容器中居中。

我不确定这种行为是否真的与它是 SVG 有关，并且我也很确定在 SVG 元素上设置宽度 100% 是问题的一部分，但如果我不设置宽度，它的宽度为零并且不会根本不出现！

帮助表示赞赏。

标签： htmlcssflexbox

您可以设置属性，而不是设置最大高度aspect-ratio，例如

aspect-ratio: 29 / 23;

（因为is的viewBox值）SVG0 0 870 690

这是一个新的且仅部分支持的属性。如果您需要确保与所有浏览器的兼容性，您可以使用其他方法来保持纵横比（所有这些方法都将涉及 whopadding-top的值 - 在您的情况下 - will be calc(100% * 23 / 29)or ~ 79.31%）

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

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

html - 使用 vh 避免在 auto-width max-height flex CSS 布局中出现 letterboxing

问题描述

解决方案

推荐阅读