28138 sujets

CSS et mise en forme, CSS3

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 Smiley decu
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 Smiley cligne
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)
upload/1695056607-48192-capturedaeacran2023-09-18aa18.jpg 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 Smiley cligne
P.
Modifié par PLGPPUR (18 Sep 2023 - 19:03)
Modérateur
Bonsoir,

Je ne suis pas certains d'avoir aussi complétement compris, mais tu peut utilisé em au lieu de px , par exemple 1.2em(ou la hauteur de l'interligne au max) pour avoir la hauteur du texte et un vertical-align pour la repositionner comme tu le souhaites par rapport au 'baseline'.

Cdt

edit
Pour ton balisage, si tu veut inserer une balise dans un texte, celle-ci doit être de type inline , la tu as pris un div(balise neutre de type block), il te faut prendre un span(balise neutre inline).

Si ton image à du sens dans le texte, alors utilise une balise image avec son attribut alt et au lieu de faire un background-size, utilise object-fit https://developer.mozilla.org/fr/docs/Web/CSS/object-fit
Modifié par gcyrillus (18 Sep 2023 - 22:12)
Meilleure solution
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 Smiley biggrin
Bonne journée !
P.
Modifié par PLGPPUR (19 Sep 2023 - 10:17)