26784 sujets

CSS et mise en forme, CSS3

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 Smiley smile
Modifié par MickFR (01 Nov 2018 - 17:02)
Bonjour Mick !

Très bonne question que tu as aujourd'hui. J'ai reproduis ta situation et ai trouvé une solution (sol. 1) : Si tes dimensions sont définiement strictes (20, 70, 10 vh), et que ton image doit faire 100% de la hauteur d'un contenant faisant 70vh, autant appliquer directement à ton image une hauteur de 70vh et non 100%.

Une autre solution (sol. 2) : si ton image n'a aucune valeur sémantique, tu peux remplacer la balise <img src="..."> par une <div></div> dont la hauteur fera 100% du contenant et à laquelle tu appliques un background-img: url("chemin/vers/ton/image.jpg");.
Si ton image a une valeur sémantique, reste encore le même principe (sol. 3) : une <div></div> contenant ton <img src="..."> à laquelle tu appliques la propriété object-fit (/!\ cette propriété n'est pas supportée par IE / ~edge).

Voici le lien vers le codepen : (sol. 1) https://codepen.io/wollsale/pen/xyvejd

En espérant t'avoir aidé !
Meilleure solution
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 Smiley cligne
Merci d’avoir pris le temps de réfléchir à ma problématique Smiley smile

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