伸缩项目中的svg缩放以匹配伸缩容器的高度并保留长宽比

Question

• 我想在div旁边有一些文本的SVG。
• SVG在缩放以匹配父级的高度时应保留其长宽比。
• 父级应该仅高到足以容纳其他弹性项目中的文本。
• 我想使它成为可以用不同数量的文本重用的组件。

我已经尝试了几种方法，而我所获得的最能防止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>

谢谢。

Answer 1

通常，这是not特定的SVG问题。

问题1-“删除宽高比CSS技巧”

padding-bottom: 100%;是1:1 Aspect Ratio box的窍门-在您的情况下，`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 ==>浏览器将计算并选择指定元素（width mdn docs）的宽度。因此结果看起来像是“越野车”（巨大的图像和较小的文本行）：

* {
  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>

一种解决方案-将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>

相关的堆栈溢出Q：

Make div fill remaining *horizontal* space in flexbox