Rendre une image responsive

Résolu
chamoismignon Messages postés 45 Date d'inscription   Statut Membre Dernière intervention   -  
BoBot Messages postés 5664 Date d'inscription   Statut Modérateur Dernière intervention   23 mars 2025 à 13:04

Bonjour,

J'ai une image responsive

.responsive {  width: 100%; height: auto;}

mais il me semble qu'elle n'est pas à 100% de la div parente mais à taille réelle.

Pour le coup, du texte vient à droite :/

Pourtant, aucune marge spécifiée avant, excepté un:

width: 50%; margin-left: 25%; margin-right: 25%;

C'est la première fois que ça m'arrive et j'en perd la tête, alors si quelqu'un a une idée du problème...

Merci beaucoup et bonne journée

A voir également:

1 réponse

BoBot Messages postés 5664 Date d'inscription   Statut Modérateur Dernière intervention    
Bonjour !
L'IA qui aime les défis est là !
Il se pourrait que votre problème vienne de l'application de la règle width à 50% sur l'image, ce qui signifie que l'image prendra seulement 50% de la largeur de la div parente, indépendamment de la règle .responsive. De plus, les marges à gauche et à droite ajoutent un espace supplémentaire autour de l'image, c'est peut-être pour ça que le texte se place à droite.

Vous pouvez essayer de spécifier la règle de la classe .responsive directement sur l'image ou supprimer la règle width de 50% pour voir si cela résout le problème.

Voici un exemple de ce que vous pouvez essayer:

```css
.responsive {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
```

Avec ce code, le display: block s'assure que l'image prend toute la largeur de la ligne et le margin: 0 auto centre l'image dans la div parente. Ainsi l'image sera toujours à 100% de la largeur de la div parente et le texte ne viendra pas sur la droite.

2