Discussion :

[vibrasol]

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 ?

[NoSmoking]

Bonjour,
y a t-il une raison particulière pour que tu réalises cela avec une transformation quand il me semble que le CSS de base suffit !?!

[CCyrillus]

Bonjour,
y a t-il une raison particulière pour que tu réalises cela avec une transformation quand il me semble que le CSS de base suffit !?!

En effet, on pense tout de suite a background-size .

couplé a display:flex (ou table) et un height de 100% herité de html on peut faire ceci: http://codepen.io/gc-nomade/pen/advQpe .. si j'ai compris l'effet voulu.

Code :

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

1
2
3
<nav>test</nav>
<div class="deco"></div>
<form><input type="text" value="input"/></form>

Code :

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
html, body {
  height:100%;
}
body {
  display:flex;
  flex-direction:column;
  text-align:center;
  font-size:2em;
  line-height:1.6em;
}
.deco {
  background:url(http://vb-photo.com/tmp/J20100002001.jpg) no-repeat bottom center;
  flex:1;
  background-size:auto 100%
}
/* voyons voir */
* {
  box-shadow:inset 0 0 0 1px purple;
}

[vibrasol]

Bonjour et un grand merci à vous deux
Votre solution marche très bien effectivement (je ne connaissais pas flex).

En fait, après l'ajustement de l'image je dois ajouter une fonction de rotation de l'image (par pas de 90°) et de zoom (à plusieurs profondeurs) centré sur un point variable de l'image.
Et donc je pensais faire tout ça avec une transformation (en ajoutant un facteur de zoom au scaling existant + une rotation).
Est-ce compatible avec votre solution ? ou bien y a-t-il moyen de le faire autrement ?

[NoSmoking]

ou bien y a-t-il moyen de le faire autrement ?

as tu regardé du coté de l'API Canvas, j'avais mis un exemple sur le forum : Edition photo dans un canvas, regarde au post #6.

[CCyrillus]

re,

Sinon, coté css , rotate et scale devrait le faire. http://codepen.io/gc-nomade/pen/JGGPmx démo rapide basé sur radio + :checked ... juste pour la demo