/* eslint react/react-in-jsx-scope:0, react/jsx-no-undef:0 */
return (
  <div style={{ marginLeft: '20px'}}>
    <h1>Scroll down 👇🏻</h1>
    <div style={{ width: '300px', marginTop: '1000px', marginBottom: '60px' }}>
      <h2>Simple image</h2>
      <ImageLazyLoad src='https://picsum.photos/id/1019/200/300' />
    </div>
    <div style={{ width: '300px', marginBottom: '60px' }}>
      <h2>Image with aspect ratio 3:2</h2>
      <ImageLazyLoad aspectRatio='3:2' src='https://picsum.photos/id/1022/200/300' />
    </div>
    <div style={{ width: '300px', marginBottom: '60px' }}>
      <h2>Image with aspect ratio 4:3</h2>
      <ImageLazyLoad aspectRatio='4:3' src='https://picsum.photos/id/1025/200/300' />
    </div>
    <div style={{ width: '300px', marginBottom: '60px' }}>
      <h2>Image with aspect ratio 16:9</h2>
      <ImageLazyLoad aspectRatio='16:9' src='https://picsum.photos/id/1021/200/300' />
    </div>
    <div style={{  marginBottom: '60px' }}>
      <h2>400x300px Image with fitMode="contain" on a 250x250px container</h2>
      <div style={{backgroundColor: 'white',height: '250px', width: '250px'}}>
        <ImageLazyLoad fitMode="contain" src='https://picsum.photos/id/1021/400/300' />
      </div>
    </div>    
    <div style={{ marginBottom: '60px' }}>
      <h2>300x400px Image with fitMode="contain" on a 250x250px container</h2>
      <div style={{backgroundColor: 'white',height: '250px', width: '250px'}}>
        <ImageLazyLoad fitMode="contain" src='https://picsum.photos/id/1021/300/400' />
      </div>
    </div>
    <div style={{  marginBottom: '60px' }}>
      <h2>400x300px Image with fitMode="cover" on a 250x250px container</h2>
      <div style={{backgroundColor: 'white',height: '250px', width: '250px'}}>
        <ImageLazyLoad fitMode="cover" src='https://picsum.photos/id/1021/400/300' />
      </div>
    </div>    
    <div style={{ marginBottom: '60px' }}>
      <h2>300x400px Image with fitMode="cover" on a 250x250px container</h2>
      <div style={{backgroundColor: 'white',height: '250px', width: '250px'}}>
        <ImageLazyLoad fitMode="cover" src='https://picsum.photos/id/1021/300/400' />
      </div>
    </div>
    <div style={{  marginBottom: '60px' }}>
      <h2>400x300px Image with fitMode="fill" on a 250x250px container</h2>
      <div style={{backgroundColor: 'white',height: '250px', width: '250px'}}>
        <ImageLazyLoad fitMode="fill" src='https://picsum.photos/id/1021/400/300' />
      </div>
    </div>    
    <div style={{ marginBottom: '60px' }}>
      <h2>300x400px Image with fitMode="fill" on a 250x250px container</h2>
      <div style={{backgroundColor: 'white',height: '250px', width: '250px'}}>
        <ImageLazyLoad fitMode="fill" src='https://picsum.photos/id/1021/300/400' />
      </div>
    </div>
    <div style={{  marginBottom: '60px' }}>
      <h2>400x300px Image with fitMode="none" on a 250x250px container</h2>
      <div style={{backgroundColor: 'white',height: '250px', width: '250px'}}>
        <ImageLazyLoad fitMode="none" src='https://picsum.photos/id/1021/400/300' />
      </div>
    </div>    
    <div style={{ marginBottom: '60px' }}>
      <h2>300x400px Image with fitMode="none" on a 250x250px container</h2>
      <div style={{backgroundColor: 'white',height: '250px', width: '250px'}}>
        <ImageLazyLoad fitMode="none" src='https://picsum.photos/id/1021/300/400' />
      </div>
    </div>
  </div>
)
