web-dev-qa-db-fra.com

Créer une image adaptée à ses dimensions parentes

J'ai quelques photos qui sont de grande taille, et je voudrais les mettre à la taille de la dimension du parent. si une fois la dimension parent est 1200x800, je voudrais donc définir les dimensions de la photo sur 1200x800, mais aussi je voudrais voir l'image entière. Si ma dimension parentale est 500x300, je voudrais que l'image soit 500x300 et ainsi de suite.

Est-ce seulement possible? Je souhaite réduire l'image ou l'agrandir en fonction de la dimension de son parent.

Merci!

csscss3htmlimage
32
kfirba

La propriété css que vous souhaitez est max-width:

Css

img {
    max-width:100%;
}

Vous pouvez ajouter un conteneur autour de votre image et définir overflow:hidden pour empêcher les images de devenir plus grandes que la largeur/hauteur définie.

55
soyuka

Utilisez ce bit de CSS pour mettre à l'échelle votre image:

img {
    max-width: 100%;
    max-height: 100%;
}
9
Morpheus

Je suis peut-être naïf, mais n'est-ce pas aussi simple que ça?

img {
    width:100%;
    height:100%;
}
4
Jako

Essayez ceci dans la balise image

<img src="url.jpg" width="100%" height="100%" />

Ou définissez l'arrière-plan de l'élément comme image et faites de même.

3
Adam Brown

essayez d'utiliser la propriété max-width, cela pourrait donner un bogue dans les versions antérieures IE cependant

#custom img {
    max-width: 100%;
    max-height: 100%;
}
1
Crowlix