Faites une image pour l'adapter à ses dimensions parentes
J'ai quelques photos qui sont de grande taille, et je voudrais les définir à la taille de la dimension du Parent. si une fois la dimension parent est 1200x800, je voudrais définir les dimensions de la photo à 1200x800, mais aussi je voudrais voir l'imageentière . Si ma dimension parent est 500x300, je voudrais que l'image soit 500x300 et ainsi de suite.
Est-ce même possible? Je veux rétrécir l'image ou l'agrandir en fonction de la dimension de son parent.
Merci!
5 réponses
La propriété css que vous voulez est de max-width :
Css
img {
max-width:100%;
}
Vous pouvez ajouter un conteneur autour de votre image et définir overflow:hidden pour éviter que les images ne dépassent la largeur/hauteur définie.
Utilisez ce bit de css pour redimensionner votre image:
img {
max-width: 100%;
max-height: 100%;
}
Je suis peut-être naïf, mais n'est-ce pas aussi simple que cela ?
img {
width:100%;
height:100%;
}
Essayez ceci dans la balise d'image
<img src="url.jpg" width="100%" height="100%" />
Ou définissez le backgound de l'élément comme image et faites de même.
Essayez d'utiliser la propriété max-width, cela pourrait donner un bug dans les versions antérieures, C'est-à-dire si
#custom img {
max-width: 100%;
max-height: 100%;
}