title: SVG content - only scale width and show full height
body: <p>I have created an SVG with foreignObject text and linked it in my HTML page using the img tag.</p>
  
  <p>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%. </p>
  
  <p>I cannot provide fixed height for svg because I want the text part to be responsive and scale as per device.</p>
  
  <p>So the foreignObject text content gets cut off as the image doesn't show the height in full.</p>
  
  <p>I have tried the viewBox and preserveAspectRatio unsuccessfully.</p>
  
  <p>here is the Jsfiddle <a href="https://jsfiddle.net/yftwn5np/" rel="nofollow noreferrer">example</a></p>
  
  <pre><code>&lt;img src="http://treebliss.com/shipping.svg" style="width: 100%; height: 100%"/&gt;
  </code></pre>
  
  <p>screenshot from actual use <a href="https://i.stack.imgur.com/IYfwR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IYfwR.jpg" alt="screenshot"></a></p>
  
  <p>I cannot use any JS for any solution in this situation.</p>