Setting the next/image component to 100% height and width

6 months ago23k times

setting the next/image to 100% height and width with the following code.


<div style={{width: '100%', height: '100%', position: 'relative'}}>
  <Image
    alt='bbbootstrap.com'
    layout='fill'
    src='image-url'
    objectFit='contain'
  />
</div>
Other answers

It can also be achieved

import Image from 'next/image';

const App = () =>{
   return (
      <Image
          alt="BBBootstrap.com"
          src="image-url"
          layout="fill"
          objectFit="cover"
        />
         );
      }
      export default App;

Add Answer

Add a codeAdd Code
Remove adsremove

Latest codes

view all

Latest Snippets

view all