[Résolu] Réduire une div se trouvant dans une ligne de texte.

Bonjour,
Peut-on réduire d'une façon responsive une image se trouvant dans une ligne, afin qu'elle épouse parfaitement les texte ?
Pour le moment, je ne peux lui donner qu'une taille en px
Le HTML donne ça :

texte <div id="image"></div> texte

et les CSS :

#image {width: 90px; background-color: 
green; background-image: url("images/image.png"); 
background-size: cover; 
height: 30px; 
display: inline-block; line-height : normal;}

Une grand merci, bonne journée
P.

Bonjour,
tu peux utiliser float-left ou float-right. C'est très bien expliqué ici.
https://forum.alsacreations.com/topic-4-57230-1-Entoureruneimagepardutexte.html

Sinon, un bon tutoriel, pas à pas :
https://www.youtube.com/watch?v=BgWs-EZvYCM

Explication :
1 - Image dans le flux de la page.
Si on insère une image dans le flux de la page elle se positionne à gauche; le texte n'habille pas l'image sur le côté. Il commence au bas de l'image.

2 - Images flottantes
Pour positionner des images (ou tout autre élément) qui soient habillées par le texte, coulant au dessus, au dessous et entre les images, comme un fleuve plus ou moins large suivant la fenêtre du navigateur, il faut les sortir du flux de la page. Nous dirons qu'elles sont flottantes. Un peu comme des péniches amarrées sur les bords d'un canal.
Modifié par Bongota (18 Sep 2023 - 17:53)

Bonjour Bongota,
Merci beaucoup pour tes explications.
Dans mon cas, je ne parlais pas de photo habillant un texte, mais d'une image inclue dans une phrase (voir capture). Peut-on la rendre responsive et lui faire respecter le line-height du texte ?
Je fonce voir tes deux liens, ça ne peut qu'aider un (toujours) novice comme moi.
Bonne soirée et encore merci
P.
Modifié par PLGPPUR (18 Sep 2023 - 19:03)

Bonjour gcyrillus,
MERCI BEAUCOUP !!!
Promis, j'avais tenté le em (à moins que... ^^).
SUPER !!!! Tout est réglé et j'ai encore appris plein de choses grâce à vous
Bonne journée !
P.
Modifié par PLGPPUR (19 Sep 2023 - 10:17)