Crimson DayFiches RPGSignaturesCodages diversAvatars 200*320 (F)Avatars 200*320 (M)Avatars 200*320 (divers)Proposer des personnalitésCommander des avatarsCommander des codesFiches d'aidePoser une questionPartenariatsSuivre les actus (Tumblr)Prochain design : se proposerLa pub : Wicked Witches





 
AccueilAccueil  S'enregistrerS'enregistrer  ConnexionConnexion  RechercherRechercher  

Partagez | 
 

 IMAGES ♦ ajuster l'image pour éviter qu'elle se répète

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar
2981 12289 0
© Avatar by 2981 12289 0


Message(#)Sujet: IMAGES ♦ ajuster l'image pour éviter qu'elle se répète   17.03.17 0:24

A propos des images qui se répètentComme vous avez dû le remarquer, il peut arriver que lorsque vous changez les URL des images dans certaines mises en page, les images en question se répètent ou ne sont pas placées comme vous le souhaitez ! Voici donc la petite solution pour corriger ceci et adapter les images à votre guise dans les emplacements.
1. Repérez l’endroit où l’URL de l’image est à changer. Par exemple (morceau pris dans une mise en page) : < rect1 style=“background:url(URLDEL'IMAGE); background-size:100%; background-position:center center”>

2. “background-size:100%” correspond à la taille de l’image (elle fait donc 100% de la largeur de son cadre), vous pouvez augmenter la valeur, l’image s’agrandira sans pour autant déformer quoi que ce soit ! Vous pouvez éventuellement mettre une valeur en pixels si vous préférez.

3. “background-position:center center” correspond à la position de l’image par rapport à son cadre. Dans ce cas là, elle est centrée horizontalement et verticalement, mais vous pouvez là aussi arranger à votre sauce. Vous pouvez modifier le premier “center” par “left” ou “right” pour un alignement à gauche ou à droite, et le deuxième par “top” ou “bottom” pour un alignement en haut ou en bas. Il est aussi possible de changer tout ça par un nombre de pixels positif ou négatif (10px ou -15px par exemple), je vous conseille de faire vos petits essais par vous-même pour vous rendre compte.

4. (ajout du 22.04.2017) Il est aussi possible d'utiliser "background-size:cover" afin qu'une image s'adapte automatiquement à son cadre sans se répéter ni s'étirer ! Cependant, s'il y a un texte ou quoi à cacher (ou si vous voulez zoomer un peu plus), il vous faudra utiliser une valeur en pourcentage au lieu de cover !
Revenir en haut Aller en bas
http://2981122890.tumblr.com
avatar
2981 12289 0
© Avatar by 2981 12289 0


Message(#)Sujet: Re: IMAGES ♦ ajuster l'image pour éviter qu'elle se répète   22.04.17 0:43

EDIT DU GUIDE : 4. (AJOUT DU 22.04.2017) Il est aussi possible d'utiliser "background-size:cover" afin qu'une image s'adapte automatiquement à son cadre sans se répéter ni s'étirer ! Cependant, s'il y a un texte ou quoi à cacher (ou si vous voulez zoomer un peu plus), il vous faudra utiliser une valeur en pourcentage au lieu de cover !
Revenir en haut Aller en bas
http://2981122890.tumblr.com
 

IMAGES ♦ ajuster l'image pour éviter qu'elle se répète

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» création d' une image pour tagger
» nombre d'images dans un gif
» Avoir le choix pour éviter les itinéraires avec peages
» Pour Elisabeth bon courage pour demain
» jeux pour faire des rébus

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Crimson Day :: Zone des Invités :: Vous & Nous :: Aide à l'utilisation-