Transformations CSS pour adapter une image

**vibrasol** · 13/12/2015, 18h56

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** · 14/12/2015, 10h17

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** · 14/12/2015, 10h51

Envoyé par 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 !?!

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** · 14/12/2015, 12h13

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** · 14/12/2015, 15h06

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** · 14/12/2015, 22h42

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

**vibrasol** · 15/12/2015, 08h33

Merci à tous pour toutes ces pistes

Avec tout ça, je pense que je vais m'en sortir.

CCyrillus, à quoi correspond le facteur 0.175 ? Comment l'as-tu déterminé ?

Code :

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

1
2
3
#r90:checked ~ .deco {
  transform: rotate(90deg) scale(0.715);
}

**NoSmoking** · 15/12/2015, 22h02

CCyrillus, à quoi correspond le facteur ~~0.175~~0.715 ? Comment l'as-tu déterminé ?

c'est à quelque chose près le rapport hauteur/largeur, 1024/1440.

**vibrasol** · 16/12/2015, 08h06

ok, je comprends.
Merci

**vibrasol** · 17/12/2015, 14h55

J'ai repris l'exemple de CCyrillus pour commencer à l'intégrer dans mon appli.
Mon souci c'est que l'image à afficher est variable et donc je dois pouvoir la changer dynamiquement.
Pour ça, j'ai supprimé la déclaration background dans le css

Code :

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

1
2
3
4
5
6
 
#imgdata {
	overflow: hidden;	
	flex:1;
	background-size: auto 100%;
}

et je l'ai remplacée par la ligne suivante dans une page js :

Code :

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

document.getElementById('imgdata').style.background = "url(http://vb-photo.com/tmp/J20100002001.jpg) no-repeat bottom center";

Résultat : je vois bien l'image mais en tout petit et il n'y a plus aucun effet de redimensionnement.
Qu'Est-ce que je n'ai pas bien fait ?

**CCyrillus** · 17/12/2015, 23h27

Envoyé par vibrasol

Résultat : je vois bien l'image mais en tout petit et il n'y a plus aucun effet de redimensionnement.
Qu'Est-ce que je n'ai pas bien fait ?

difficile de te dire avec si peu d'infos.(css et html), peut tu faire un codepen avec ton bug, les boules de cristal ne sont plus ce qu'elles étaient

?

Sinon, as tu, par exemple, ajouté une bordure ou un ombrage interne à #imgdata , histoire de bien voir la surface qu'il couvre ? Quel(s) navigateur(s) ?

**vibrasol** · 18/12/2015, 09h06

J'ai modifié le codepen initial en exportant la déclaration du background dans JS : http://codepen.io/vibra/pen/mVPMOM

**CCyrillus** · 19/12/2015, 15h02

ou bien tu déclare à nouveau l'ensemble des propriétés : http://codepen.io/anon/pen/VeaqgM (background-size inclus)

ou tu ne changes que le background-image:http://codepen.io/anon/pen/dGMwrz

**vibrasol** · 21/12/2015, 12h55

Ok je comprends,
Mais c'est pas évident de savoir ce qu'on est obligé de déclaré ensemble !
Merci beaucoup.

**vibrasol** · 22/12/2015, 16h22

J'ai intégré le code dans mon source et ça marche bien pour l'affichage de l'image.
En revanche, j'ai un pb avec la rotation.
Pour que ça puisse s'adapter selon les images, je dois remplacer le facteur 0.715 par le rapport h/l de l'image courante.
Mais je n'arrive pas à récupérer ces valeurs à partir de l'image background chargée.
Y a-t-il un moyen ou bien il faut charger l'image dans src pour pouvoir en récupérer les dimensions ?

**CCyrillus** · 22/12/2015, 22h19

effectivement, coté navigateur il faut récupérer l'image dans une balise img, attendre qu'elle soit chargée (onload) pour enfin connaitre les dimensions et en calculer le ratio.

sinon, coté serveur c'est plus rapide et plus sur.

++

Transformations CSS pour adapter une image

CSS

Discussions similaires

Partager

Partager