Discussions

probleme avec mon image

Image

Bonjour,

 

J ai decidé de faire le test avec une autre

 

Mon image n'est pas collé en haut pourtant j'ai bien top-0.

De plus que je mette flex-1 ou pas ca ne change rien.

 

export default function Layout({ children }) {
  return (
    <div className="min-h-screen flex flex-col ">
      {/* Image entete    */}
      <div className="absolute top-0 left-0 right-0 bottom-0 aspect-[500/400] z-0">
        <Image
          src="/welcome.webp"
          alt="welcom"
          fill
          className="object-contain"
        />
      </div>
      {/* Content */}
      <div className="flex-1 z-10 pt-[80vw]">{children}</div>
      {/* Footer  */}
      <Footer />
    </div>

 

 

 

4 réponses
Image
Louis-Nicolas Leuillet
Le 23/06/2024 à 10:10

Hello Jean-luc

Alors ici le problème c'est que sur un seul composant c'est compliqué pour moi de trouver le problème. Tu as essayé sans "object-contain" ? Essaye de regarder avec le sélecteur de la console du navigateur.

Image
Jean-luc Crobeddu
Le 24/06/2024 à 08:26

Bonjour
Oui j ai changé un peu le code mais je trouve que c est pas simple les images. Il faudrait un chapitre entier consacré à cela. C'est une proposition, je pense que ça aiderait. Du coup j'ai mis "object-cover" et dans la div qui contient mon image j ai mis w-full et h-25. Mon image prend bien la largeur de l'ecran mais avec h-25 elle est trop haute, mais si je mets h-20 la hauteur me convient mieux mais mon image est coupée :-).
Autre soucis si je reduis la taille de l'ecran mon site n'est plus reponsive car le titre h1 remonte sur l'image plutôt que de rester en dessous...

Image
Louis-Nicolas Leuillet
Le 25/06/2024 à 15:24

Haha en effet je pourrais faire un chapitre dédié aux images ! Ne t'en fais pas, avec de la pratique tu réussiras comme un jeu d'enfant. La classe object-contain est parfaite pour les images, sinon essaye de jouer avec les classes "aspect-h-9" et "aspect-w-16".

Image
Jean-luc Crobeddu
Le 26/06/2024 à 08:56

oui mais si par exemple on choisi une image petite (800x400 par ex) il est compliqué pour qu'elle prenne toute la largeur de l'écran en conservant une faible hauteur (bandeau en haut de page par exemple). 
Oui c'est sûr il faut pratiquer.

Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.

Informations

Créée le 21 juin 2024 15:10
Dernière activité le 26 juin 2024 08:56