La hauteur maximale d'Img ne respecte pas les dimensions du parent
J'ai un img
élément à l'intérieur d'un liquide div
. Que l'img a son max-height
jeu à 100%. Donc, si l'image est plus grande que la div, il devrait être rendu aussi grand que la div.
La taille d'origine de l' .fichier png est de 200x200. Dans mon navigateur, la div montre que 284x123. Par conséquent, l'img doit être rendu à 123x123, pour garder ses proportions.
Cependant, l'img est de briser la div à l'limites et montre encore que 200x200.
Je n'arrive pas à comprendre pourquoi ce qui se passe.
Ce qui se passe sur Chrome, mais pas sous Firefox (dernière fois que j'ai essayé).
Vous pouvez voir l'état actuel ici (http://paginas.fe.up.pt/~ei07171/test/).
Si vous passez la souris sur la gauche côté de l'image, vous verrez une flèche grise, l' .png que je parle. La flèche sur le côté droit est un fichier SVG et fonctionne correctement.
Edit: j'ai créé une jsfiddle (http://jsfiddle.net/dcastro/3Ygwp/1/), où l'img max-hauteur semble fonctionner correctement.. je ne trouve pas ce sur mon projet qui est à l'origine de ne pas travailler.
source d'informationauteur dcastro
Vous devez vous connecter pour publier un commentaire.
J'ai tout compris. Pour un élément max-hauteur de travail, l'un de ses parents doit avoir un
height
attribut défini (apparemment, dans une unité fixe, comme px, pas en pourcentage).De la spécifications du w3c:
Comme aucun de mes img parent ont une hauteur fixe défini, j'ai dû limiter mes img max-largeur de la place.
Modifier: Aussi, il semble webkit prend les specs un peu trop littéralement: https://stackoverflow.com/a/3808701/857807
J'ai utilisé la solution présentée dans ce thread, et utilisé
position: absolute; max-height: 100%; top: 0
.Je suis tombé sur ceci aussi bien et j'ai réussi à obtenir une cohérence de la hauteur à travers les différents navigateurs à l'aide de
vh
unités dans le CSS, par exemplemax-height: 5vh;
que dans le 5% de la hauteur de la fenêtre d'affichage.Essayez d'ajouter les attributs width et height à ton img est
Également définir les dimensions naturelles dans votre code HTML à l'aide du navigateur de rendu.
HTML
CSS