将 SVG 在 flex 容器中按比例缩放以匹配容器高度并保持宽高比

Question

• 我想在一个带有一些文本的 div 旁边放置一个 SVG。
• SVG 应该保持其宽高比，同时缩放以匹配父元素的高度。
• 父元素应该只足够高以适应另一个 flex 项目中的文本。
• 我想将其制作成组件，以便可以重复使用并具有不同数量的文本。

我尝试了几种方法，在这个 CodePen 中最接近我所期望的结果，并且可以使 SVG 在 Chrome 中不会消失：https://codepen.io/rosshathaway/pen/ExjePpM。问题是 SVG 正在占用尽可能多的空间。

CSS:

* {
  box-sizing: border-box;
}

.outer {
  display: flex;
}

.inner {
  margin: 4px;
  border-top: dotted 8px black;
  border-right: dotted 8px black;
  border-bottom: dotted 8px black;
  padding: 0.5em 2em;
}

.logo {
  position: relative;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 100%;
}

svg {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

HTML：

<div class="outer">
  <div class="logo">
    <svg
  version="1.0"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 93 93"
  preserveAspectRatio="xMidYMid meet"
>
  <g
    transform="translate(0, 93) scale(0.100000,-0.100000)"
    fill="#231f20"
    stroke="none"
  >
    <path
      d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
-166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
13 151 2 203 -21z"
    />
    <path
      d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
    />
    <path
      d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
-137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
    />
  </g>
</svg>
  </div>
  <div class="inner">
    A few <br>
    lines <br>
    of text <br>
    bla bla bla bla bloop <br>
    aADSF<br>
    gljsdf
  </div>
</div>

感谢。

- mmmm

Answer 1

总的来说，这不是一个特定的SVG问题。

问题1 - “删除纵横比CSS技巧”

padding-bottom: 100%; 是用于 1：1长宽比框 的技巧 - 在您的情况下，svg1图标已经是一个正方形（所以去掉那些额外的样式）。 https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

问题2

您设置了两个列 - 一个带文本，一个带图片。

flex-basis属性指定可伸缩项的初始长度。 https://www.w3schools.com/cssref/css3_pr_flex-basis.asp

flex-basis默认为auto。

auto ==> 浏览器将计算并选择指定元素的宽度（宽度mdn文档）。因此结果看起来“有 bug”（大图像和小文本列）：

* {
  box-sizing: border-box; 
}

.outer {
  display: flex;
  border: dotted 8px red;
}

.inner {
}

.logo {
  width: 100%;;
  height: auto;
}

<div class="outer">
  <div class="logo">
    <svg
  version="1.0"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 93 93"
  preserveAspectRatio="xMidYMid meet"
>
  <g
    transform="translate(0, 93) scale(0.100000,-0.100000)"
    fill="#231f20"
    stroke="none"
  >
    <path
      d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
-166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
13 151 2 203 -21z"
    />
    <path
      d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
    />
    <path
      d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
-137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
    />
  </g>
</svg>
  </div>
  <div class="inner">
    A few <br>
    lines <br>
    of text <br>
    bla bla bla bla bloop <br>
    aADSF<br>
    gljsdf
  </div>
</div>

一种解决方案 - 在text-col中添加flex-grow: 1;

flex-grow: 1; - 元素将按比例增长1。如果没有其他flexbox项目具有flex-grow值，则它将填充剩余空间。https://cssreference.io/property/flex-grow/

对于svg，可以添加任何所需的宽度（20％，100px或20em）。

.flex-container {
  display: flex;
  border: 1px dashed orange;
}
#col1{
  max-width: 100%;
  border: 3px dashed violet;
}
#col2{
  border: 2px dashed blue;
  flex-grow: 1;
}
svg {
  height: auto;
  width: 150px;
}

  <section class="flex-container">
    <div id="col1">
      <svg
    version="1.0"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 93 93"
    preserveAspectRatio="xMidYMid meet"
  >
    <g
      transform="translate(0, 93) scale(0.100000,-0.100000)"
      fill="#231f20"
      stroke="none"
    >
      <path
        d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
  285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
  -166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
  13 151 2 203 -21z"
      />
      <path
        d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
  m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
      />
      <path
        d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
  71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
  -137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
      />
    </g>
  </svg>
  <br>
   width: 150px;
    </div>
    <div  id="col2" class="col">
      A few <br>
      lines <br>
      of text <br>
      bla bla bla bla bloop <br>
      aADSF<br>

     
      </p>
      gljsdf
    </div>
  </section>

相关stackoverflow问题:

如何让一个div在flex布局中填充剩余的*水平*空间？

请注意，此处的关键词是“水平”，而不是“垂直”。

- Ezra Siton

---

谢谢Ezra。你在这里做的是在视觉上的改进，但我想要做的是让flex容器的高度成为适应文本的最小高度（例如你示例中的#col2）。然后，SVG将会扩展其高度以与flex容器一样高，并按比例放大其宽度以保持其纵横比。如果需要更好地解释，请告诉我。 - undefined

右侧列的高度会根据内容的变化而改变（无论是放置文章还是一个单词）。将svg的高度设置为100%，宽度自动调整。但是，如果在右侧列上放置了大量内容，布局会给你提供一个巨大的图标。这只是一个与设计有关的简单问题，与代码无关。 - undefined

我尝试将svg的高度改为100％，宽度改为自动，但是没有得到期望的效果。我希望高度被限制在适合文本的范围内。当我进行了更改时，出现了一些奇怪的行为，所以我尝试了JSFiddle：https://jsfiddle.net/1jzceLsa/，而不是Codepen。看起来奇怪的行为发生在Chrome中，而不是Firefox中。在Chrome中，当我增加窗口大小时，SVG会增大，而当我减小窗口大小时，SVG不会缩小。 - undefined

Answer 2

我最终创建了一个包含边框的新SVG。这样可以正确缩放，但是边框上的点的大小和它们之间的间距会改变，而不是像CSS边框那样添加或删除原始大小的点。

- mmmm