Discussion :

[Guildux]

Bonjour,

Je ne sais si ce topic est plutot de l'ordre des CSS ou du Javascript (les 2 a mon avis), alors je le poste ici :

je cherche a dimensionner mes images "au mieux". Mon image est contenue dans un DIV qui a une taille pouvant varier.

Je voudrais que l'image :
- tienne sur toute la largeur (width: 100%) s'il y a assez de place pour y stocker la hauteur (height: auto)
ou
- tienne sur toute la hauteur (height: 100%) s'il y a assez de place pour y stocker la largeur (width: auto)

le but est que le choix se fasse automatiquement. Aujourd'hui, je ne vois pas d'autre solution que verifier programmatiquement le ratio largeur / hauteur de mon div, de le comparer a celui de mon image et d'appliquer la classe dynamiquement.

Peut-on automatiser cela ?

[ciberrique]

Bonjour, est ce que tu pourrais donner un exemple concret car j'avoue avoir un peu de mal à voir ce que tu veux obtenir.

Et aussi en plus nous dire à quelle technologie tu as accès et tu souhaites utiliser : php, css, xhtml, js ?

[Guildux]

Mon image est stockee dans un div.

Ce div est dimensionne proportionnellement a la zone 'cliente' du navigateur.

Cependant, je veux que mon image prenne soit :
- toute la largeur du div
- toute la hauteur du div

... mais sans perdre le ratio largeur/hauteur de mon image.

Actuellement je fait ca lors de l'affichage (en js) :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
mon_div.innerHTML = "<img src='"+ img_url+"' class="+((div_width/div_height > 0.8333333) ? 'img_height': 'img_width'))+"'>";

avec mes 2 css ressemblant a ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
img_width
{
	width: 100%;
	height: auto;
}
 
img_height
{
	width: auto;
	height: 100%;
}

Actuellement, ca fait ce que je veux ... mais j'aurai souhaite savoir s'il y avait une methode en CSS pour gerer ce genre de condition (sans passer par un script JS).

[Bovino]

CSS ne permet pas de programmation. Tu ne pourras donc pas faire ce que tu souhaites, c'est donc bien JavaScript qu'il faut utiliser pour cela.