Taille du parent d'un élément redimensionnable

Bonjour bonjour,

problème du jour : j'ai une liste de liens contenant des images redimensionnables en hauteur de 128x128px.
Sous chrome tout va bien le ratio de l'image est conservé et le lien s'adapte à sa taille.
Sous les autres par contre la largeur du lien est toujours de 128px, malgré que la hauteur de l'image soit bonne et le ratio conservé, du coup l'image se trouve sur le bord gauche du lien.
Évidemment il est possible de la centrer avec margin:auto mais pour appliquer mon effet de hover j'aimerais que le lien fasse la taille de l'image ; y'a-t'il un moyen de le spécifier ?

Voici mon code :

<div id="links">
   		<a href="index.html" id="accueil"><img src="accueil.png" alt="Accueil" /><strong>Accueil</strong></a>
    	<a href="index.html" id="infos"><img src="infos.png" alt="&Agrave; propos" /><strong>&Agrave; propos</strong></a>
        <a href="index.html" id="real"><img src="real.png" alt="R&eacute;alisations" /><strong>R&eacute;alisations</strong></a>
        <a href="index.html" id="comp"><img src="comp.png" alt="Comp&eacute;tences" /><strong>Comp&eacute;tences</strong></a>
        <a href="index.html" id="contact"><img src="contact.png" alt="Contact" /><strong>Contact</strong></a>
        <a href="index.html" id="cv"><img src="cv.png" alt="CV" /><strong>CV</strong></a>
    </div>

et

#links {
	position:absolute;
	top:0;
	right:0;
	width:400px;
	height:50%;
}
#links a {
	position:absolute;
	border-radius:1em;
	text-decoration:none;
	color:#000;
	height:35%;
	border-radius:1em;
}
#links a:hover, ul a:focus {
	background-color:#CCC;
}
#links a strong {
	display:none;
}
#links a img {
	display:block;
	height:100%;
	margin:0;
}

(Les liens sont positionnés individuellement dans la suite du code mais je vous épargne ça.)

Merci d'avance !

Hello,

Donc les images ont une hauteur de 100% la hauteur de leur parent.
Les liens (parent en question) ont une hauteur de 35% de la hauteur du parent.
Ta DIV #links (parent des liens) a une hauteur de 50% de quelque chose (le parent de #links, dont on n'a pas connaissance ici).

Dans le genre j'écris et je donne pour information du code cryptique, tu viens de remporter une médaille.

Mes remarques en vrac:
- Ta liste de liens est, à vue de nez, un menu. Pour une liste de liens de ce genre, la convention est d'utiliser une liste non ordonnée (UL, items de liste LI), plutôt que des liens directement dans un DIV.
- Tes éléments STRONG dans les liens ne sont à priori pas justifiés. Pour de la simple mise en forme, c'est l'élément SPAN qui est indiqué.
- Tu peux mettre un texte alternatif vide pour chacune de tes images. Avec le code actuel, tu ne fais que répéter ce qui est déjà écrit juste ensuite, de sorte que l'intitulé de ton lien devient "AccueilAccueil" ou "RéalisationsRéalisations".
- Je n'ai pas compris à quelle taille tu veux afficher tes images, s'il s'agit d'une taille fixe ou d'une taille variable, et s'il s'agit d'une taille variable en fonction de quoi elle varie.
- Une page en ligne c'est toujours pratique pour constater le problème directement et tester des solutions (via Firebug/Web Inspector notamment).

PS: j'ai supprimé les deux «up» par souci de lisibilité.
Modifié par Florent V. (06 Jul 2010 - 18:31)

Ok merci pour tes réponses, c'est vrai que j'avais simplifié au maximum voir si ça résolvait quelque chose.

Donc là en l'occurrence mon div#links fait la moitié de la hauteur de l'écran, et chaque lien fait 35% de la hauteur de mon div, de ce côté là aucun soucis tout se redimensionne bien en hauteur.

Le problème c'est que pour conserver le ratio de l'image la largeur de l'image varie elle aussi automatiquement, mais pas la largeur du lien (du moins pas dans tous les navigateurs).

Je voulais donc savoir s'il y a moyen de spécifier au lien de prendre la largeur de l'image.

Je vais regarder pour mettre en ligne mais je garantis rien, déjà que je galère pour ce message..!
Modifié par MatTheCat (06 Jul 2010 - 20:05)

Ah ok, c'est problématique comme situation. Il n'existe pas d'instruction standard pour dire à un navigateur de redimensionner ton image en gardant le ratio d'origine.
Une solution relativement simple serait de calculer les dimensions en JavaScript. Mais il faudrait refaire le calcul à chaque redimensionnement de la fenêtre.

Non, en fait le ratio d'origine est conservé, mais à part sous chrome le lien fera toujours la largeur de l'image non redimensionnée