Partage
  • Partager sur Facebook
  • Partager sur Twitter

Afficher proprement images de taille differentes

    11 septembre 2017 à 20:17:43

    Bonjour,

    je suis entrain de developper un site web et j'ai un petit soucis.

    les utilisateurs upload leurs images via un formulaire et j'aimerai afficher chaque avatar upload dans un cadre de 100px * 100px

    Les "avatars" que les utilisateurs upload n'ont pas du tout les mêmes dimensions , il y a un peu de tout. Comment afficher ces images proprement peu importe la taille de l'image sur du 100 * 100 px.

    Pouvez vous m'aider ? merci d'avance

    • Partager sur Facebook
    • Partager sur Twitter

    On estime à environ 550 millions le nombre d'armes à feu actuellement en circulation. Autrement dit il y a un homme sur douze qui est armé sur cette planète. La seule question c'est … comment armer les onze autres ?

      20 septembre 2017 à 11:00:13

      Hello,

      Tu as plusieurs options :

      ① Si tu maitrises Php suffisement, tu peux creer une miniature de 100x100 pixels (il y a des tonnes de tutorial sur la redimention d'images donc je te laisse chercher). 

      A titre personnel, je te deconseille de creer une miniature carre car des parties seront tronques. Si tu peux, mon conseille serait plutot de determiner si tu as une image en mode portrait ou en mode paysage. Si tu as une image en mode portrait : tu redimensionne la hauteur a 100px et la largeur tu la calcule avec le produit en croix. Et inverssement, si tu as une image en mode paysage : tu redimensionne la largeur a 100px et la hauteur tu la calcule avec le produit en croix. Une fois que c'est fait, tu peux passer au point ②

      ② (Si tu n'es pas a l'aise avec le Php ne te fais pas chier a redimensionner l'image et utilise juste cette technique) tu peux utiliser cette technique :

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title></title>
      	<style type="text/css">
      		div {
      		    width: 100px;
      		    height: 100px;
      		    background-color: #e4e4e4;
      		    text-align: center;
      		}
      
      		div img {
      		    display: inline;
      		    position: relative;
      		    border: 0;
      		    vertical-align: bottom;
      		    top: 50%;
      		    transform: translateY(-50%);
      		    -moz-transform: translateY(-50%);
      		    -webkit-transform: translateY(-50%);
      		    -o-transform: translateY(-50%);
      		    -ms-transform: translateY(-50%);
      		    width: auto;
      		    max-width: 100%;
      		    height: auto;
      		    max-height: 100%;
      		}
      	</style>
      </head>
      <body>
      	<div>
      		<img src="https://www.fuse.tv/image/57db0a97db0d51524f000086/816/545/perfume-fuse-interview-2-png.jpg">
      	</div>
      </body>
      </html>



      • Partager sur Facebook
      • Partager sur Twitter
        20 septembre 2017 à 11:31:20

        Bonjour,

        pour moi il faudra de toute façon passer par PHP (ou un langage serveur) tout simplement parce que si on permet l'upload de n'importe quelle taille d'image, on va se retrouver avec des fichiers énormes affichés dans un tout petit carré ("dans un vrai mouchoir de poche !").

        Et à titre personnel, je suis justement en désaccord avec toi, Scion : je préfère une image tronquée qu'une image avec des bordures épaisses en haut et en bas, ou sur les côtés.

        Le mieux du mieux étant un système qui permet à l'utilisateur⋅trice de choisir la manière dont l'image sera tronquée et/ou redimensionnée, avec ce genre de script : http://deepliquid.com/content/Jcrop.html (en ayant bien sûr un fallback côté serveur si l'image arrive quand même non-carrée). Une démo qui semble faire le taff demandé : http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail

        • Partager sur Facebook
        • Partager sur Twitter

        Pas d'aide concernant le code par MP, le forum est là pour ça :)

          21 septembre 2017 à 2:28:12

          @Lamecarlate : Oui je suis d'accord avec toi que l'ideal serait de redimensionner l'image c'est sur !
          Ceci dit, j'ai constate que bcp de personne ne s'y connaissent pas du tout en Php et/ou ne souhaite pas (ou ne peuvent pas) poursuivre l'apprentissage du Php (c'est un peu comprehensible ... Je me met a leur place en imaginant que moi developpeur j'ai besoin d'un design. Eh bien malheureusement je n'ai pas le temps et/ou l'envie de suivre une formation Photoshop juste pour ca [alors que je suis occupe sur d'autre projet]).

          Je propose cette methode si on n'est pas à l'aise avec le Php (notamment sur le traitement des images qui est relou il faut l'avouer).

          Ensuite pour ce qui concerne ma proposition, c'est uniquement ma proposition lol
          Je ne suis pas fan des images que l'on tronque pour en faire un carre. J'ai pas mal de sites ou les membres upload des images. Et j'avoue utiliser cette technique (couple avec le redimensionnement en Php) et je t'assure que le rendu est assez propre :lol:  (... mais je ne suis pas designer donc peut etre que c'est moche en realite haha) 

          J'utilise ta solution "permettre à l'utilisateur⋅trice de choisir la manière dont l'image sera tronquée et/ou redimensionnée" lorsque je n'ai pas la flemme.

          ==> Mais je ne connais pas le niveau de @Mandrilux en Php (est elle capable de recuperer les images, les manipuler en Php, integrer un systeme de redimensionnement comme Jcrop, etc..) donc ...

          -
          Edité par Scion 21 septembre 2017 à 2:33:49

          • Partager sur Facebook
          • Partager sur Twitter
            21 septembre 2017 à 3:27:34

            Bonjour,


            Comment changer la mention ou texte "Sécurisé" juste après le cadenas en nom de domaine pour un domaine en https.

            Par exemple:

            Afficher "[cadenas] mon_domaine" à la place de "[cadenas] Sécurisé".

            Merci.

            • Partager sur Facebook
            • Partager sur Twitter
              21 septembre 2017 à 4:02:14

              @Ange03 : Pourquoi tu viens polluer ce topic? :pirate:

              Cree ton propre topic la prochaine fois !!!

              Bon je vais te repondre meme si tu merites des coups (et qu'on t'ignore) :

              Si tu veux afficher ton nom a la place de Securise, il te faut avoir le certificat plus cher (SSL EV) + etre une marque 

              https://www.globalsign.fr/fr/centre-information-ssl/definition-certificat-ev-ssl/

              https://www.certificat-ssl.info/doc/certificat-ssl-ev

              Ce certificat coute assez cher. Qui plus est tu dois fournir des documents. Par exemple, est ce que ton site est inscrit aupres de la INPI ? (La INPI permet en gros "d'acheter" les droits sur la marque).

              Je t'invite a lire lien que je te fournis + te renseigner sur les prix (je te previens, ca va te couter la peau des fesses).

              https://www.inpi.fr/fr/services-et-prestations/depot-de-marque-en-ligne

              -
              Edité par Scion 21 septembre 2017 à 4:13:30

              • Partager sur Facebook
              • Partager sur Twitter

              Afficher proprement images de taille differentes

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur
              • Markdown