Discussion :

[Toufik83]

Bonsoir,

Pourquoi le background-size Y, n'est pas adapté à la hauteur de son parent ?

https://jsfiddle.net/Toufi9/jchp0830/

[Toufik83]

bonsoir,
je sais qu'on peut faire $(element).animate({"background-size":"cover"}); ou contain ou 100%... mais, est-ce qu'il y'a un moyen pour animer le background-size X et Y avec jQuery.animate() ? genre

Code :

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

$(element).animate({"background-size":"+=50px +=50px"});

[danielhagnoul]

Je crois qu'il est impossible d'animer le x indépendamment du y pour une image de fond.

[Toufik83]

bonsoir,
merci danielhagnoul pour ta réponse, vu qu'il n'y a pas de transition sous IE, j'ai fais un petit script jQuery qui permet d'adapter l'image de fond selon la taille de son parent, ainsi que la taille originale de l'image.
pour un background-size adaptable a 250px je met :

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
20
21
22
23
24
25
26
27
28
29
 
OBJ.mouseenter(function () {
     $(".cloned").remove();
     imgCloned = $("<img src=" + $(this).css('background-image').replace(/url|\(|\)/gi, '') + " alt='' class='cloned' />")
      .appendTo("body");
     bg_sizeIE = imgCloned.width() > imgCloned.height()
           ? parseInt(
            	(imgCloned.width()) * 250 / imgCloned.height()
            								)
            : parseInt(
            	(imgCloned.height()) * 250 / imgCloned.width()
            								);
             $(this).animate({backgroundSize: bg_sizeIE }, 1000)
                      .css({ borderColor: Colors[Math.floor(Math.random() * Colors.length)]
                    });
 
 
 
   }).mouseleave(function () {
            bg_sizeIE = imgCloned.width() > imgCloned.height()
               ? parseInt(
            		(imgCloned.width() * 200) / imgCloned.height()
            								)
                : parseInt(
            		(imgCloned.height() * 200) / imgCloned.width()
            								);
                 $(this).animate({ backgroundSize: bg_sizeIE}, 1000)
                    .css({ borderColor: Colors[Math.floor(Math.random() * Colors.length)] });
                });

et pour 200px je change juste la multiplication * 250, par * 200.
pour les images ayant une taille moins que 200/200 ça fonctionne parfait, l'image devient immédiatement adaptable a son parent, par-contre les images plus grandes que 200/200, plus que leurs tailles dépassent 200 plus que le bg_sizeIE devient grand, j'essai de régler ça.

[danielhagnoul]

Je ne sais pas ce que cela vaut, mais pour les navigateurs obsolètes il existe un polyfill : https://github.com/louisremi/background-size-polyfill.