Redimensionnement d'un texte font-size par rapport au div resizable [Résolu]

Signaler
Messages postés
140
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
12 mai 2021
-
Messages postés
140
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
12 mai 2021
-
Bonjour et bonne Année à tous :-) ! après avoir fait plusieurs recherches sans succès sur internet, je me permet de postuler cette forum pour solliciter votre aide.
Voila mon problème, en fait j'ai un texte qui s’agrandit par rapport au fenêtre, mais ce que j'aimerais faire c'est plutôt que mont texte s'agrandit par rapport à mon div resizable! voici mon code
<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>

</head>
<body>

<div class="flexFont">
    This is FlexText:<br>Autoscaling by DIV width
</div>

<script>
flexFont = function () {
    var divs = document.getElementsByClassName("flexFont");
    for(var i = 0; i < divs.length; i++) {
        var relFontsize = divs[i].offsetWidth*0.01;
        divs[i].style.fontSize = relFontsize+'vw';
  
    }
};

window.onload = function(event) {
    flexFont();
};
window.onresize = function(event) {
    flexFont();
};
</script>

EDIT : Ajout des balises de code



Comme vous le voyez le window.onload et window.onresize permet d'agrandir mont font-size par rapport au fenêtre mais ce que je veux c'est quand ont modifie le div avec le menu resize souligner en rouge alors la valeur du font-size varie on fonction du menu resize et non en fonction du fenêtre! merci de votre aide! :-).

1 réponse

Messages postés
32477
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
347
Messages postés
140
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
12 mai 2021

Ouaou! quelle réponse rapide et efficace! c'est vraiment ce que je cherche! merci beaucoup Jordane pour ton lien magique!
Messages postés
32477
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
347
Je n'ai pas de mérite... je suis juste doué avec google.
:-)
Messages postés
140
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
12 mai 2021

J'ai un autre question, à ce que je vois quand on redimensionne la largeur du div alors la hauteur augmente en même temps avec la largeur, ce que j'aimerais c'est qu'on puisse modifie la largeur seulement quand on augmente le width et même chose pour le height, et que le zone de texte soit editable c'est possible?? une idée?
Messages postés
32477
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
347
width signifie largeur .. et height;. hauteur... donc je ne comprends pas vraiment ta question.

Je ne comprend pas non plus pourquoi la hauteur augmenterait automatiquement en même temps que tu élargis ta div....
Quel code utilises tu ? Qu'as tu écris exactement ?

Ensuite, pour ce qui est de pouvoir rendre l'élément éditable... tu peux avec, justement, le contenteditable
https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contenteditable

Par contre... nouvelle question = ouverture d'une nouvelle discussion.... sinon on ne s'y retrouve plus.
Merci.

Et pense à mettre celle-ci en résolue (via l'icone de roue crantée à droite du titre de ta question).

N'oublie pas non plus d'utiliser les balises de code pour nous poster ton code : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Messages postés
140
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
12 mai 2021

Excuse moi! j'ai mal formulé ma question mais je crois que tout est en ordre! pour le contenu éditable c'est bien aussi ce que j'ai voulu c'est tous ce que j'ai besoin pour le moment! pour d'autre question je vais ouvrir un nouveau sujet je vais mettre celle-ci en résolu! encore merci ;-)