title: Image cut off with resizeMode cover
body: <p>I have an image, when I want to make it bigger using resizeMode=&quot;cover&quot;, part of the image is cut off. How to fix that?</p>
  <pre class="lang-typescript prettyprint-override"><code>render() {
      return (
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>         &lt;View style={styles.container}&gt;       
              &lt;Image
                style={styles.imgStyleGoogle}
                source={{uri: 'my.png'}}
              /&gt;
          &lt;View&gt;
      )
  }
  </code></pre>
  <pre class="lang-typescript prettyprint-override"><code>const styles = StyleSheet.create({
    container: {
          flex: 1,
          alignItems:  'center',
          marginLeft: ratio * 5,
          marginRight: ratio * 5,
      },
  
  imgStyleGoogle: {
          flex: 1,
          height: ratio*25,
          width: ratio*100,
          resizeMode:'cover',
      }
  })
  </code></pre>
  <p>Here is example of the picture:
  <a href="https://i.stack.imgur.com/OBgy8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OBgy8.png" alt="enter image description here" /></a></p>