[Résolu] Image qui déborde

Bonjour,

Je me permets de vous contacter car je rencontre un problème.

J'ai un header de 20vh, une section de 70vh, un footer de 10vh (égal 100vh).

Dans ma section, lorsque j'intègre une image, elle dépasse de la section en débordant sur le header et sur le footer.

N'y aurait-il pas un moyen afin que l'image occupe 100% de la hauteur de sa div ?

J'ai essayé ceci, sans résultat :

img {
height: 100%;
width: auto;
}

Lien CodePen

Auriez-vous une piste à me donner ?

Merci de votre aide
Modifié par MickFR (01 Nov 2018 - 17:02)

Salut !

Ton problème vient du fait que tes div n'ont pas de hauteur, donc c'est "auto" par défaut et du coup c'est le contenu qui impose sa hauteur, ici : ton image.

Si tu souhaites quelquechose de souple, tu peux par exemple fixer la hauteur de ton wrapper, ici à 100vh en tout logique, et donner un pourcentage du genre 20% à tes div "colonne6" (NB : attention, il y a des fautes de frappe dans le HTML de ton Codepen : tu as mis "colonn6" au lieu de "colonne6").

Bon, c'est mon avis, hein

Merci d’avoir pris le temps de réfléchir à ma problématique

Wollsale, la démo est très explicite, top !