Rendre une image responsive
RésoluBonjour,
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:
- Acronis true image 2021
- Acronis true image - Télécharger - Sauvegarde
- Image iso - Guide
- Acronis disk director - Télécharger - Utilitaires
- Pes 2021 pc - Télécharger - Sport
- Reduire taille image - Guide
1 réponse
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.
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.