2020-11-03 21:40:53 +01:00
|
|
|
import Image from 'next/image'
|
2020-11-06 23:13:01 +01:00
|
|
|
import ViewSource from '../components/view-source'
|
2021-06-10 00:48:31 +02:00
|
|
|
import mountains from '../public/mountains.jpg'
|
2020-11-03 21:40:53 +01:00
|
|
|
|
|
|
|
const Fill = () => (
|
|
|
|
<div>
|
2022-10-30 02:20:11 +02:00
|
|
|
<ViewSource pathname="pages/fill.tsx" />
|
2020-11-03 21:40:53 +01:00
|
|
|
<h1>Image Component With Layout Fill</h1>
|
|
|
|
<div style={{ position: 'relative', width: '300px', height: '500px' }}>
|
2022-10-17 16:41:35 +02:00
|
|
|
<Image
|
|
|
|
alt="Mountains"
|
|
|
|
src={mountains}
|
|
|
|
fill
|
|
|
|
sizes="100vw"
|
|
|
|
style={{
|
|
|
|
objectFit: 'cover',
|
|
|
|
}}
|
|
|
|
/>
|
2020-11-03 21:40:53 +01:00
|
|
|
</div>
|
|
|
|
<div style={{ position: 'relative', width: '300px', height: '500px' }}>
|
|
|
|
<Image
|
|
|
|
alt="Mountains"
|
2021-06-10 00:48:31 +02:00
|
|
|
src={mountains}
|
2022-10-17 16:41:35 +02:00
|
|
|
fill
|
|
|
|
sizes="100vw"
|
|
|
|
style={{
|
|
|
|
objectFit: 'contain',
|
|
|
|
}}
|
2020-11-03 21:40:53 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div style={{ position: 'relative', width: '300px', height: '500px' }}>
|
|
|
|
<Image
|
|
|
|
alt="Mountains"
|
2021-06-10 00:48:31 +02:00
|
|
|
src={mountains}
|
2020-11-03 21:40:53 +01:00
|
|
|
quality={100}
|
2022-10-17 16:41:35 +02:00
|
|
|
fill
|
|
|
|
sizes="100vw"
|
|
|
|
style={{
|
|
|
|
objectFit: 'none',
|
|
|
|
}}
|
2020-11-03 21:40:53 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
|
|
|
|
export default Fill
|