Chrome change la taille de certaines images !

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Chrome change la taille de certaines images !

    Bonjour,

    Je viens de m'apercevoir d'un truc bizarre sous Chrome : la taille de certaines images est modifiée avec ce navigateur (et pas sous Firefox par exemple).

    Par exemple, sur cette page : http://www.rouchenergies.fr/qui-somm...ronnement.html , les logos Qualipac, qualibois, etc s'affichent avec une taille de 62x41, alors que mon code html insère des images de 150x98, avec les attributs width 150 et height 98 :

    Cliquez sur l'image pour l'afficher en taille normale

Nom : taille-images-chrome-20160313.jpg 
Affichages : 1 
Taille : 108,2 Ko 
ID : 1823990

    Quand j'inspecte ces images (toujours sous Chrome), je lis un code html parfaitement identique à ma saisie, mais quand on survole l'URL de l'image (dans l'inspecteur), on voit apparaître une infobulle disant :
    62 x 41 pixels (Natural : 150 x 98 pixels), comme on le voit ici :

    Cliquez sur l'image pour l'afficher en taille normale

Nom : taille-images-chrome-inspecteur-20160313.jpg 
Affichages : 1 
Taille : 141,0 Ko 
ID : 1823991

    Qu'est-ce qui provoque ça, à votre avis ?
    Merci d'avance, et bon dimanche

    Flo
    Flo, Ariège

    Il n'y a que celui qui a honte d'apprendre qui a peur de demander

  • #2
    Re : Chrome change la taille de certaines images !

    Bonjour,

    https://boulderinformationservices.w...n-table-cells/ donne la réponse, très détaillée.
    Attention à l'utilisation des tableaux et de max-width:100%. Chrome analyse les 2 cellules et constate qu'il peut réduire automatiquement sous forme de vignette les images si les autres cellules du tableau contiennent un texte long.

    Solution, remplacer les tableaux par un container et des row-fluid.
    Pas de demande de support par MP.
    S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

    Commentaire


    • #3
      Re : Chrome change la taille de certaines images !

      Bonjour Jisse03,

      Ah d'accord ! Merci
      Bon ben me voilà bonne pour apprendre à bootstrapper si j'ai bien compris.
      J'ai commencé à faire quelques expériences, et ça m'agace un peu : quand je redimensionne la fenêtre du navigateur (dès que je passe en dessous de 768 px), la 2ème colonne passe systématiquement sur une 2ème ligne, et ce n'est pas ce que je veux.
      J'essaie avec :
      <div class="container-fluid">
      <div class="row-fluid">
      <div class="span3">image</div>
      <div class="span9">texte</div>
      </div>
      </div>
      Je vais continuer mes lectures, mais ce n'est pas évident de trouver la bonne info pour ce que je recherche (qui est certainement bête comme chou pour quelqu'un qui sait faire)

      EDIT:
      j'ai aussi fait qq essais avec col-md-3 et col-md-9 à la place des span3 et span9, et c'est pire : quelle que soit la largeur de l'écran, la colonne n° 2 passe systématiquement sur une 2ème ligne.
      Soit j'ai RIEN compris (probable), soit il me manque un fichier (possible).

      Idem avec :
      <div class="row">
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">Image</div>
      <div class="col-xs-6 col-sm-8 col-md-9 col-lg-9">texte</div>
      </div>

      Je ne comprends pas pourquoi, si on considère que l'écran est divisé en 12 colonnes, pourquoi si je juxtapose 2 éléments qui font respectivement 3 colonnes et 9 colonnes, un des 2 se sent obligé d'aller à la ligne suivante (d'autant qu'il ne contient que du texte, ce qui devrait l'autoriser à se conformer facilement à la taille de la colonne dans laquelle il se trouve)...
      Dernière édition par FlodAriege à 13/03/2016, 20h52
      Flo, Ariège

      Il n'y a que celui qui a honte d'apprendre qui a peur de demander

      Commentaire


      • #4
        Re : Chrome change la taille de certaines images !

        Je me permets un petit up, car depuis que Jisse m'a mise sur la voie, mes différentes expériences ne m'ont pas conduite au succès ;(
        Ce ne sont pourtant pas les articles traitant du sujet qui manquent (bien que souvent en anglais), mais il doit vraiment y avoir un truc que je comprends de travers pour obtenir toujours et systématiquement un résultat nul.
        Un petit coup de main svp ?
        Merci !
        Flo
        Flo, Ariège

        Il n'y a que celui qui a honte d'apprendre qui a peur de demander

        Commentaire


        • #5
          Re : Chrome change la taille de certaines images !

          Envoyé par FlodAriege Voir le message
          Bon ben me voilà bonne pour apprendre à bootstrapper si j'ai bien compris. [...]
          J'essaie avec :

          <div class="container-fluid">
          <div class="row-fluid">
          <div class="span3">image</div>
          <div class="span9">texte</div>
          </div>
          </div>
          ...Il me semble que c'est plutôt <div class="row">, la fluidité de la ligne (row) étant déjà indiquée par <div class="container-fluid">.


          [...] j'ai aussi fait qq essais avec col-md-3 et col-md-9 à la place des span3 et span9
          Là c'est du Bootstrap 3, et je ne crois pas que JSN Boot reconnaisse cette syntaxe récente.


          __________________

          ...Sinon : la solution donnée à la fin de l'article signalé par Jisse fonctionne très bien pour corriger le souci constaté avec Chrome :

          td img {
          max-width: none;
          }

          Et ajouter un peu d' « air » entre l'image et le texte permettrait une présentation encore plus nickel Chrome () :

          td img {
          max-width: none;
          padding-right: 8px;
          }
          Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

          Commentaire


          • #6
            Re : Chrome change la taille de certaines images !

            Merci à PhilJ de m'avoir aidé à comprendre la réponse de Jisse.
            Ca fonctionne nickel, merci !
            (je me repencherai sur cette histoire de bootstrap plus tard, toujours pas compris, mais au moins l'affichage de mes images dans l'unique tableau que j'utilise sur le site est revenu à la normale).

            Bon WE.
            Flo
            Flo, Ariège

            Il n'y a que celui qui a honte d'apprendre qui a peur de demander

            Commentaire


            • #7
              Re : Chrome change la taille de certaines images !

              Bonjour,


              Envoyé par FlodAriege Voir le message
              [...] je me repencherai sur cette histoire de bootstrap plus tard, toujours pas compris...
              A ce sujet, la documentation Bootstrap n'est pas toujours très claire concernant la syntaxe des containers et des « lignes » (rows), cela notamment du fait de l'existence de deux versions très différentes (Boostrap 2.x et Bootstrap 3.x)... ce qui m'a fait écrire une sottise en critiquant la syntaxe :

              <div class="container-fluid">
              <div class="row-fluid">
              <div class="span3">image</div>
              <div class="span9">texte</div>
              </div>
              </div>

              En fait, cette syntaxe est tout à fait correcte, du moins avec Bootstrap en version 2.

              En version 3, il faudrait utiliser quelque chose comme :

              <div class="container">
              <div class="row">
              <div class="col-md-3">image</div>
              <div class="col-md-9">texte</div>
              </div>
              </div>

              Remarquez au passage le changement de syntaxe de Bootstrap 2 à Bootstrap 3 :

              • Déclaration <div class="container-fluid"> devenant <div class="container">
              • Déclaration <div class="row-fluid"> devenant <div class="row">
              • Disparition des classes spanx (= span1 à span12) servant à diviser les lignes au profit d'une syntaxe différenciée tenant compte des formats d'écran (.col-xs-x, .col-sm-x, .col-md-x, .col-lg-x)



              Plus de détails : http://www.bootply.com/bootstrap-3-migration-guide, notamment le tableau http://www.bootply.com/bootstrap-3-m...de#cheat-cheat.
              Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

              Commentaire

              Annonce

              Réduire
              Aucune annonce pour le moment.

              Partenaire de l'association

              Réduire

              Hébergeur Web PlanetHoster
              Travaille ...
              X