Comment faire rétrécir l'image d'arrière-plan proportionnellement à la taille du bouton en javascript?

Je fais un échiquier en javascript. L'échiquier places (boutons) ont été initialement conçus pour être 60px par 60px, mais maintenant ils sont 40px par 40px. 

    button 
    {
      width:40px; 
      height:40px; 
      border: 0
    }

Cependant, certaines des pièces qui ont été conçues pour cet échiquier précédent sont encore 60px par 60px. Y a-t-il un moyen en Javascript de faire rétrécir les images proportionnellement pour s'adapter à la taille carrée? Actuellement, les images correspondent à la taille carrée, mais ne rétrécissent pas, alors quand je dis, 

    square.style.backgroundImage = imgLink; // square is the button, imgLink is "WhiteKing.jpg" for example.

Je reçois des morceaux comme ça -

entrez la description de l'image ici

Si le WhiteKing.jpg avait rétréci proportionnellement, il aurait bien adapté. Est-il un moyen de le faire en Javascript? Toute aide serait vraiment appréciée.

23
demandé sur CodeBlue 2012-03-01 02:37:06

4 réponses

La plupart des navigateurs modernes prennent en charge les options CSS background-image comme background-size, donc vous pouvez vraiment utiliser quelque chose comme ceci: 

button{
  width:40px; 
  height:40px; 
  border: 0;
  background-size: 100%; /* To fill the dimensions of container (button), or */
  background-size: 40px auto; /* to specify dimensions explicitly */
}

Bien sûr, vous pouvez aussi l'utiliser en JavaScript (mais il vaut mieux l'ajouter à css for button déjà existant): 

square.style.backgroundSize = '100%';
33
répondu Juicy Scripter 2012-02-29 22:50:05

Vous allez vouloir utiliser: Background-size: 100%;

3
répondu Ken Wheeler 2012-02-29 22:43:50

Il existe différentes options pour faire cela, mais si c'était moi, je redimensionnerais physiquement les fichiers d'image réels pour maintenir un contrôle optimal sur la qualité de l'image. S'il y a beaucoup de fichiers, et que cela prend beaucoup de temps à faire dans Photoshop (ou quel que soit l'éditeur d'image que vous utilisez), utilisez votre langage de script préféré associé à quelque chose comme ImageMagick et laissez l'ordinateur faire ce qu'il fait de mieux ;)

CSS

Utilisez CSS3 {[0] } comme mentionné par Juicy Scripteur. Notez que background-size est cependant un attribut CSS plus récent qui ne fonctionnera pas dans les navigateurs plus anciens (comme

HTML

Chargez l'image de la pièce d'échecs avec une balise img réelle et modifiez la largeur de cet élément html (l'inconvénient est que cela provoquera probablement des reflows qui peut ralentir le rendu de la page ou provoquer un scintillement ou d'autres bizarreries indésirables). Vous aurez probablement besoin d'utiliser différentes techniques de positionnement (comme position, z-index, etc.) en fonction de votre mise en œuvre.

Manuel

Il suffit de rendre les images physiquement plus petites. Je pense que c'est, à la fin, la meilleure option (bien que la plus longue) car elle vous permettra de conserver un contrôle maximal sur la qualité des images. Différents navigateurs peuvent redimensionner de façon imprévisible les images dans différentes façons (selon la façon dont ils gèrent le redimensionnement), alors que si vous les redimensionnez vous-même, vous êtes assuré que les images sont présentées de la façon dont vous avez l'intention.

2
répondu robmclarty 2012-02-29 23:09:14

Essayez peut-être d'Ajouter position:relative et background-color:transparent au style du bouton, puis utilisez un div à l'intérieur de la balise button en définissant top et left sur 0px. A l'intérieur de cette div veuillez une balise pour le graphique du bouton avec le style défini sur la nouvelle largeur/hauteur (40px).

Pourriez ne pas avoir besoin d'utiliser la position absolue pour l'industrie graphique, si vous ne voulez pas mettre n'importe quoi dessus. Si vous le faites, utilisez z-index sur la div pour le déplacer derrière n'importe quel texte, etc...

Essayez ça. J'espère que ça fonctionne! : D

0
répondu Chris M 2012-02-29 22:47:28