Transformations CSS pour adapter une image
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:
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 ?
