Learn, grow and help others with BBBootstrap
Contribute us with some awesome cool snippets using HTML,CSS,JAVASCRIPT and BOOTSTRAP
Setting the next/image component to 100% height and width
3 years 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
© 2025 bbbootstrap. All rights reserved