Positionner une image dans une div

Bonjour,

J'aimerais afficher une image voici le code
Pour une meilleur compréhension :

Code:

---

1 2 3

<div class="div"><img class="image" src="image.png" width="100px" height="200px" /> </div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

.div { position: absolute; width : 50px; height:50px; left : 50px; top:0; border-radius : 1em; overflow:hidden; } .image { position: relative; }

---

Le but serait d'afficher seulement le milieu du haut de l'image a l'intérieur de la div

en mettant l'image en arrière plan, vous pourrez peut-être contrôler plus facilement la partie à afficher.

regardez un article qui parle de la technique des "sprites" pour voir des exemples :
https://kpinto.developpez.com/tutori...-http-sprites/

Bonjour,
en gardant l'image comme élément de ton HTML tu peux positionner facilement l'image en utilisant les propriétés object-fit et object-position.

Si tu dois être compatible IE alors il va te falloir recourir à un positionnement plus conventionnel à savoir

Code:

---

1 2 3 4 5 6

.top-center { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); }

---

le conteneur devant être en position:relative pour servir de référent.

Merci pour vos réponses
Je vais regarder ca plus en détails :)

Bonjour bonjourajax,

Je t'ai fait un exemple :

https://codepen.io/Zonecss/pen/WJLJJr

Tu trouveras aussi une autre technique utilisant les background-image et background-position

Bonjour
Merci c'est parfait !

:P

@DMC :
ta solution, reprise ci-dessous

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

.div { position: relative; width : 50px; height:50px; border-radius : 1em; overflow:hidden; } .div > img { position: absolute; left : -100%; top:0; }

---

ne m'apparaît comme pas très robuste, elle impose que la largeur de l'image soit le triple du conteneur.

@bonjourajax :
• pourrais tu nous dire ce qu'il en est de la solution retenue, image dans div ou background
• il existe un bouton

http://club.developpez.com/aidenouve...82noresolu.png

Je n'ai pas encore eu le temps de les essayer je vous tiens au courant ^^