Comment fixer le composant image suivant à une hauteur de 100% ?
Le framework Next.js est basé sur la populaire librairie React, développée et maintenue par Facebook. Ce framework ajoute de nombreuses fonctionnalités complémentaires. Il y a notamment un système de rendu des pages côté serveur (SSR) qui permet un meilleur référencement, et la gestion de l'internationalisation, importante pour pouvoir éditer un site ou une application en plusieurs langues. Un des autres ajouts est un système de gestion automatisée des images. Ce système utilise une balise spécifique appelée "Image". Si vous souhaitez fixer une hauteur de 100 % afin de remplir le container parent, il faut paramétrer spécifiquement la balise.
Il existe 2 méthodes possibles selon le composant que vous utilisez. La première utilise la balise "Image" fournie par le composant "next/image". Il faut paramétrer l'élément parent pour prendre une hauteur égale à "100%". Ajoutez dans cette balise l'attribut "layout" avec comme valeur "fill" pour que l'image remplisse tout son container et ait donc une hauteur de 100 %.
<div style={{width: '100%', height: '100%', position: 'relative'}}>
<Image
src='/mon-image.jpg'
layout='fill'
objectFit='contain'
/>
</div>
Une deuxième solution est d'utiliser le nouveau composant "next/future/image". Ce nouveau composant améliore les performances et l'expérience des développeurs avec la balise "Image". L'attribut "fill" indique à l'image de prendre toute la place possible. On peut également ajouter le paramètre "sizes" pour indiquer aux navigateurs de proposer une taille d'image adaptée à la taille de la page web. Indiquez dans ce cas la valeur "100vw".
<Image
fill
alt='Mountains'
src='/mountains.jpg'
sizes='100vw'/>