Chrome change la taille de certaines images !

[FlodAriege]

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 :



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 :



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

Flo

[jisse03]

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.

[FlodAriege]

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)...

[FlodAriege]

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

[PhilJ]

Re : Chrome change la taille de certaines images !

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;

}

[FlodAriege]

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

[PhilJ]

Re : Chrome change la taille de certaines images !

Bonjour,

[...] 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.