Discussion :

[bonjourajax]

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[mathieu]

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/

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[bonjourajax]

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

[DMC]

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

[bonjourajax]

Bonjour
Merci c'est parfait !

[NoSmoking]

@DMC :
ta solution, reprise ci-dessous

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[bonjourajax]

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