Bonjour,
Je veux utiliser les transformations CSS pour ajuster dynamiquement une image et la positionner exactement entre 2 divs (eux-mêmes dépendant de la fenêtre du navigateur).
Voici le code de la fonction d'adaptation que j'utilise :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function majImg ()
{
	var div = document.getElementById('img0');
	var imgh, botmenu, topkeying;
	var data, imgtranslate, imgscale;
 
	// the image height
	imgh = div.naturalHeight; 
	// the upper limit to fit the image
	botmenu = document.getElementById('menu').offsetTop + document.getElementById('menu').offsetHeight;
	// the lower limit to fit the image
	topkeying = document.getElementById('keyingzone').offsetTop;
 
	// the scaling factor
	imgscale = (topkeying - botmenu) / imgh;
	// the translate factor
	imgtranslate =  (imgh * (1 - imgscale)) / 2;
 
	data = 'scale('+imgscale+','+imgscale+') translate(0px,'+imgtranslate+'px)';
	div.style.transformOrigin = "center center"; 
	div.style.webkitTransform = data; 
	div.style.mozTransform    = data; 
	div.style.msTransform     = data; 
	div.style.oTransform      = data; 
	div.style.transform       = data;
 
}

L'appli de test est dispo ici : http://vb-photo.com/tmp/
L'image semble être bien redimensionnée (mais pas sûr à 100%) mais le positionnement n'est pas bon. Pourquoi à votre avis ?