SVG content - only scale width and show full height

Question

I have created an SVG with foreignObject text and linked it in my HTML page using the img tag.

The issue is that the width of the svg is scaled as per device but the height is fixed around 153px. I have set the svg width and height to 100%.

I cannot provide fixed height for svg because I want the text part to be responsive and scale as per device.

So the foreignObject text content gets cut off as the image doesn't show the height in full.

I have tried the viewBox and preserveAspectRatio unsuccessfully.

here is the Jsfiddle example

<img src="http://treebliss.com/shipping.svg" style="width: 100%; height: 100%"/>

screenshot from actual use

I cannot use any JS for any solution in this situation.

Answer 1

Viewport-percentage lengths:

https://www.w3.org/TR/css3-values/#viewport-relative-lengths

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. As an alternative to setting both the html/body element's heights to 100%, you could also use viewport-percentage lengths:

body {
    height: 100vh;
}
img {
  width: 100%; 
  height:100%;
}

<img src="http://treebliss.com/shipping.svg"  />

Answer 2

The image should be in a container with 100% height (vh)

I have created a fiddle

div {
text-align: center;
height: 100vh;
}
img {
border: thin dotted darkgrey;
width: 100%;
height: 100%;
}