title: Fit Static Google Map API into a custom size without stretching
body: <p>I am trying to create a banner-like feel to by using a custom google maps image for my pages. I am using react google maps with Maps Static API. The static map has a size of 640 x 355 hardcoded in the link.</p>
  
  <p>I would like the map to take over to 100% of the width of the screen while only displaying the height of 216px, where the center of the map is the marker icon at coordinates position.</p>
  
  <p>Currently what happens is the map either fits into the bounds, of its container 100% by 216px, but stretches itself, or it keeps it's original size without resizing. What is the best practice for rendering the map without stretching. Thanks! </p>
  
  <pre><code>  return (
                  &lt;main style={{  height: '216px' }}&gt;
                     &lt;div style={{ position: 'relative' }}&gt;
                           &lt;img alt={alt} src={src} width='100%' height="100%" /&gt;
                     &lt;/div&gt;
                  &lt;/main&gt;
      )
  </code></pre>
  
  <p>where src is <code>https://maps.googleapis.com/maps/api/staticmap?size=640x355&amp;scale=1&amp;key=API_KEY&amp;maptype=terrain&amp;language=en&amp;markers=icon:http://localhost:3000/icon.png|43.0439203,-112.414927&amp;zoom=15&amp;center=__CENTER__&amp;format=png8&amp;</code></p>