Bonjour à tous !

J'ai un petit souci avec un de mes posts en html. Voilà j'ai tous mes textes de mon post en html qui lui s'adapte en fonction de l'écran de chacun, mais pas les images. Moi qui dispose d'un navigateur en zoom 80%, je vois mes deux colonnes d'images, mais les personnes au delà de ce %, (et même j'imagine que le forum a été codé ainsi) voient la première colonne, mais de moitié la seconde. Sauf si ils dé-zooment...

Auriez-vous une solution à me proposer afin que mes images s'adaptent à la résolution de chacun ? ou bien dois-je revoir la taille de ces dernières ?

Merci d'avance pour vos messages et vos réponses !

Oui pardon, voici deux captures, la première me concernant en zoom 80% on voit très bien les images :

La deuxième concerne ceux qui ont des résolutions différentes, voir trop zoomer :

Salut,

A première vue tes images ne semblent tout simplement pas responsives. Cependant il est impossible de confirmer cela car nous ne connaissons pas ton code...

J'ai pas encore regarder, mais utilise figure et figcaption :

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-images-18

Et responsive veut dire que la page vas en fonction de ton écran, donc que tu sois en 80% ou pas, ça ne devrait pas être un soucie. Faut juste bien coder ton code.

Du coup utilise figure pour chaque image, et après tu modifie ça sur la page css pour qu'il soit bien adapter.

-
Edité par N.Parvedy 4 juin 2018 à 15:39:37

Voici mon code :

<center><table class="PingTable" CELLSPACING=10>

<tr>

<td><center><img src="https://i62.servimg.com/u/f62/18/34/58/86/jelly10.jpg"></center></td>

<td><center><img src="https://i62.servimg.com/u/f62/18/34/58/86/tour_410.jpg"></center></td>

</tr>

<tr>

<td><center>Map Entrée de Jelly</center></td>

<td><center>Tour du sorcier 4</center></td>

</tr>

<tr>

<td><center><img src="https://i62.servimg.com/u/f62/18/34/58/86/tour_810.jpg"></center></td>

<td><center><img src="https://i62.servimg.com/u/f62/18/34/58/86/deuil11.jpg"></center></td>

</tr>

<tr>

<td><center>Tour du sorcier 8 </center></td>

<td><center>Porte du deuil </center></td> </tr>

<tr>

<td><center><img src="https://i62.servimg.com/u/f62/18/34/58/86/ts_8110.jpg"></center></td>

<td><center><img src="https://i62.servimg.com/u/f62/18/34/58/86/chemin10.jpg"></center></td>

</tr>

<tr><td><center>TS 81 acte 4 </center></td>

<td><center>Carte - chemin enneigé </center></td></table></center><br/><br/>

Je ne comprends pas en quoi figure pour m'aider dans mon souci de résolution :/

Désolée d'embêter.

-
Edité par Benzouye 5 juin 2018 à 17:49:35

Bonjour,

Le fait que tes images ne soient pas responsives signifie qu'elles ne sont pas adaptées à toutes les tailles d'écran. Dans ton cas (zoom 80%), le code te permet d'avoir la disposition souhaitée.

Cependant pour qu'elles soient responsives donc adaptées à tout type d'écran, tu dois utiliser les media-queries : https://www.alsacreations.com/article/lire/930-css3-media-queries.html 

Bonne fin de journée.

Bonsoir,

Je n'arrive pas à utiliser les données que vous m'avez fourni. Je débute en html, c'est un peu dure pour moi de comprendre ce que je devrais faire des mes images...

On m'a conseillé de mettre width="auto" height="auto" dans chacune de mes images, mais malgré ça, ça ne les conditionnent pas pour toutes les résolutions

Pouvez-vous me conseiller dans mes lignes de codes ?

Je t'ai donné la solution en fait, malheureusement ça demande pour toi de voir le cour et de le lire, ça te demandera forcément un petit effort. Ca prends 10-15 min c'est pas bien méchant et au moins ça te sera utile pour le long terme.

Après je te conseillerai de voir le cours sur les flexbox pour bien positionner tout ça.

Allez un petit effort !