image élastique (responsive) dans un texte

Bonjour,

Puis-je rendre responsive une image se trouvant dans un texte ?

Pour le moment, je ne peux mettre à l’image qu’une hauteur en px, et cela ne s’aligne pas au texte

Voici mon HTML :

<h4>Textes provenant en partie d'une thèse (auteur inconnu) remanié par <img class="banana" src="images/banana.png" alt="logo banana papersf"/></h4>

et les CSS :

	.banana{height:50px; display :inline-block;}		

Merci pour votre aide.

PLS

Bonsoir,

Alors j’ai, mis l’image dans une div, ce qui donne ça :

remanié par <div id="banana"></div> pour le

et pour les css :

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

le problème reste le line-height et la "responsivité" de l’image (de l’ID)

Merci pour votre aide et bon week-end,

P.

Bonjour.

Alors sans code ça va être compliqué, mais en CSS y’a un truc de base pour rendre toutes les images responsives :

img {
    max-width: 100%;
}

Rien qu’avec ça dans ton code CSS, tu obliges toutes les images du site à ne pas dépasser le cadre de leur parent. Si c’est pour une image de fond (background-image), ta solution (avec cover) est la meilleure qui fonctionne à peu près…

Merci pour l’astuce !

Bonjour,

Cela a été réglé avec une taille en em, un object-fit et un display inline.

J’ai tenté avant ce que vous me conseilliez, mais cela n’allait pas

Mais merci pour vos réponses, c’est très sympa

Bonne journée