1

I'm trying to scale an inline svg to the height of another div, and have the width scale to keep the svg in proportion (with only css). The closest that I've come is this (also below), using tables and expanding the svg to the height of the tr using a garbage hack which fails in Firefox. Unfortunately it also fails to address the original problem in any browser, as the div doesn't seem to resize to the width of the svg. Is there a way to do this? (I'm more than happy to leave the table method)

here is the attempt mentioned above

.scale {
  height: 1px;
}
.scale > div {
  height: 100%;
}
.scale svg {
  height: 100%;
}
.scale svg > rect {
  fill: lightblue;
}
<table>
  <tbody>
    <tr>
      <td class="scale">
        <div>
          <svg viewbox="0 0 10 10">
            <rect x="0" y="0" width="10" height="10" color="blue"></rect>
          </svg>
        </div>
      </td>
      <td>
        1
      </td>
    </tr>
  </tbody>
</table>
Community
  • 1
  • 1
1I1III1
  • 167
  • 2
  • 10
  • please post the code – nicholaswmin Dec 29 '15 at 00:22
  • Well it does work well like that doesn't it? You just asked the container to be 1px, so you probably have some issues to see it. Ps, without the table it would work too :-) – Kaiido Dec 29 '15 at 03:01
  • I'm unclear on what you are trying to do here. *"I'm trying to scale an inline svg to the height of another div"*...what other div?. Do you have an image of the intended result? – Paulie_D Dec 29 '15 at 10:10
  • another div with arbitrary content/height, like [this](https://jsfiddle.net/dayx3j95/) – 1I1III1 Dec 29 '15 at 18:12

0 Answers0