title: React Carousel with overflowing image
body: <p>Currently working on a react side project that has an api that returns an image array. Currently having issues with a third party Carousel, my image resizes to the screen but has overflow. I have tried</p>
  
  <pre><code>  height: auto;
    flex: 1;
    object-fit: cover;
    height: 100%;
  </code></pre>
  
  <p>Heres the React Component </p>
  
  <pre><code>`import React from 'react'
  // import Carousel from '@brainhubeu/react-carousel'
  // import '@brainhubeu/react-carousel/lib/style.css'
  import Carousel from 'nuka-carousel'
  
  const headerImages = (props) =&gt; {
    const imageResults = props.trending.slice(0, 5).map(r =&gt; (
      &lt;img key={r.id} src={`https://image.tmdb.org/t/p/w1280${r.backdrop_path}`} alt={r.title} className='header-image' /&gt;
    ))
    return &lt;div className='header-images'&gt;
      &lt;Carousel&gt;{imageResults}&lt;/Carousel&gt;
    &lt;/div&gt;
  }
  
  export default headerImages
  </code></pre>
  
  <p>`</p>
  
  <p>The issue is the same with a different Carousel too.</p>
  
  <p>Here is some screenshots: <a href="https://i.stack.imgur.com/jc6gO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jc6gO.png" alt="1st"></a>
  <a href="https://i.stack.imgur.com/czGka.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/czGka.png" alt="2nd"></a>
  <a href="https://i.stack.imgur.com/t1wA1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t1wA1.png" alt="3rd"></a>
  <a href="https://i.stack.imgur.com/wdtvH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wdtvH.png" alt="enter image description here"></a></p>
  
  <p>As you can see there's some white there (overflow) that is only present when I scroll down</p>