Forums : Xul, Xbl, JS...

Le premier paragraphe est juste à titre indicatif, lis directement le EDIT

As-tu essayé de mettre ton image dans une box puis de rajouter un spacer avec un -moz-box-flex à 10 ? ça va obliger ton image à ne pas s'étaler. Et ton image tu peux même mettre un -moz-box-flex à 0 si tu veux (enfin je crois :/)

EDIT : en fait après un test, je me rends compte que j'étais bête de rajouter le spacer... Il suffit de mettre ton image avec un -moz-box-flex:0; Et elle ne bougera plus; (Si ça ne fonctionne pas sur l'image directement, enferme la dans une box).

Merci de l'astuce, je la note mais ça marche pas top... peut-être étais-je trop flou ?

• Imagine une interface de Messagerie instantannée :

<hbox>
			<image id="avatar" />
			<vbox flex="1">
				<textbox id="name" label="Nom" />
				<hbox>
					<toolbarbutton id="status_icon" class="status_unavailable" disabled="true" />
					<menulist id="status" onselect="setPresence();" flex="1">
						<menupopup>
							 <menuitem value="available" label="&status.available;" />
							<menuitem value="away" label="&status.away;" />
							<menuitem value="dnd" label="&status.dnd;" />
							<menuitem value="unavailable" label="&status.unavailable;" selected="true" />
						</menupopup>
					</menulist>
				</hbox>
				<textbox id="mood" value="" label="Phrase d'état" />
			</vbox>
		</hbox>

J'ai donc à gauche un Avatar qui fait 3 lignes, et à droite l'un au-dessous de l'autre : Le nom, l'état, la phrase d'état.

L'image originale est plus grosse que 3 lignes en hauteur. Si je mets -moz-box-flex, et bien mon image est affichée dans sa vraie taille et casse la présentation.

Je voudrais que la hauteur de l'image s'aligne avec la place que représente ces 3 lignes... et que la largeur s'ajuste pour ne pas déformer l'image.

Et si vraiment ce n'est pas possible, j'aimerais spécifier un couple width/height dans lequel cantonner l'image genre 96/96, mais sans déformer l'image si cette dernière n'est pas carrée...

Est-ce réalisable ?

mmm...

Tu peux tenter : "max-height : 3em;" 1em normalement, c'est la hauteur/largeur d'un symbole : Regarde ici ;)

Déjà essayé avec les Max-height... Effectivement, la hauteur ne dépasse plus... mais l'image n'est pas redimensionné, elle est déformé !

si j'ai une 128x128 que je mets max-height: 96px;... Je me retrouve avec une image aplati en 128x96... =/ et non une image en 96x96.

Bon sang, c'est incroyable, ça doit être un problème tout bête, je refuse de penser que Mozilla ou CSS ne permette pas une chose aussi simple que celle de faire s'ajuster une image à son environnement, sans la déformer ! Il doit forcément y avoir une solution mais je l'ai pas encore trouvé.

Un énorme merci à celle ou celui qui pourra m'aider car visuellement c'est vraiment moche... Et sinon va falloir que je déploie l'artillerie lourde pour faire plusieurs tailles d'avatars, etc... la mort quoi.

Pour ce genre de chose, je te conseille fortement de plutot embarquer ton image dans du code html, beaucoup plus adapté.

Ok, enfin je sais pas si mon interface de client Jabber s'y prête énormément, je verrai de ce côté-là, merci du tuyau.

mais tu peux embarquer du html dans un xul:box ou dans un xul:button. Je pense qu'utiliser le <html:img> (peut être à embarquer dans un <html:div> plutot que le <xul:image>, pourrait rendre les choses beaucoup plus simples.

Et dans ce cas, comment y accéder, changer la photo ? URL chrome ? file:// ?

Un petit exemple d'image avec un ID pour pouvoir changer l'image dynamiquement ?

Désolé de poser des questions aussi "bateaux".

via un setAttribute. Ça ne change absolument rien. C'est juste qu'au lieu de mettre des balises XUL, tu mets des balises HTML, genre:

<vbox>
  <html:div>
    <html:img src=""/>
  </html:div>
</vbox>

C'est tout :)

J'ai essayé malheureusement j'ai toujours le même type de problème.

Si je spécifie une hauteur ou une largeur... l'image n'adapte pas l'autre valeur en fonction du ratio, mais se déforme : garde sa longueur d'origine non modifiée, et s'applatie ou s'étire selon la longueur donnée dans l'autre sens.