Partage

Ajuster une image au TD

11 octobre 2017 à 13:30:19

Bonjour,


J'ai des images de différentes talle et j'aimerai trouvé un code pour ajuster la taille de l'image à la taille de mes TD de mon tableau en sachant que mes TD fond 200px de largeur.

Je vous remercie de votre aide

Cordialement
Max
Cordialement
Staff 11 octobre 2017 à 13:35:17

Bonjour,

on ne fait pas de mise en page avec des tableaux. Je t'invite à (re)lire le cours d'OpenClassrooms : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
11 octobre 2017 à 14:53:22

Bonjour

Qui te parle de mis en page, j'ai fait un tableau dans ma page et je veut insere des images point barre!!!!

Cordialement
Staff 11 octobre 2017 à 15:01:06

Ok, pardon, j'ai présumé de ton intention.

Maintenant : sans ton code on ne peut pas aller bien loin. Peux-tu nous donner une page en ligne ? Ou au pire copier ton code sur https://codepen.io/pen et nous fournir l'adresse ?

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
11 octobre 2017 à 15:06:14

Re,

Mon code du tableau:

    <table id="tab_drap" border="0" >

          <tr>
              <td class="text_drap" align=center>Drapeau Représentant</td>
          </tr>
          <tr>
              <td class="text_drap" align=center><sub>**</sub> Grèce <sub>**</sub></td>
          </tr>
          <tr>
              <td><img class="drap" src="../../dossier_drapeaux/flags/Grece.gif" width="160" height="110" alt="Drapeau"></td>
          </tr>

          <tr>
              <td class="text_drap" style="text-align: center; ">Armoirie Représentant</td>
          </tr>
          <tr>
              <td class="text_drap"  align=center><sub>**</sub> Grèce <sub>**</sub></td>
          </tr>
          <tr>
              <td style="text-align: center;" ><img src="../../../Mon_Site2/armoiries/Grèce.png"  alt="Armoirie" ></td>
          </tr>
       
 </table>

@+

Max

Cordialement
Staff 11 octobre 2017 à 15:16:45

… des fois je me demande si j'écris correctement mes demandes.

Bref.

Un tableau dont chaque ligne ne contient qu'une cellule, ce n'est pas un tableau de données (à double entrée, donc). Donc on n'est pas censé⋅e utiliser <table> pour ça, ce n'est pas sémantiquement correct. Ce que tu as, c'est un tableau de mise en page, désolée d'insister. À moins que ce ne soit que la première colonne d'un tableau plus conséquent ? (et quand bien même, ça ferait des lignes au contenu bizarre)

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
11 octobre 2017 à 15:29:23

Re,

Je veut bien mais alors quel est la bonne démarche?

Cordialement
Staff 11 octobre 2017 à 15:34:12

Ben de simples div :)

Quelque chose comme ça : https://codepen.io/anon/pen/YrvayK

Ensuite : tu veux que tes images soient étirées pour faire toute la largeur de leur conteneur ? ou bien rétrécies pour ne pas dépasser cette largeur ?

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
11 octobre 2017 à 15:42:14

Re,

Oui ton ton code avec div est certainement plus approprier.Je proférerez qu'il rétrécisse

Cordialement
Staff 11 octobre 2017 à 15:56:59

Dans ce cas, ajoute max-width: 100% à tes images (tu peux même te permettre de le faire sur img, pour cibler toutes les images de ton site, c'est une bonne pratique).

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
11 octobre 2017 à 16:08:01

Re,

Je te remercie je vais essayé de pratiquer comme tu dit on verras bien!

Je me suis rendu sur ton site je veut bien t’apprendre a faire des photos puisque je suis photographe à la retraite et toi tu m'apprend le langage...! 

Cordialement

Ajuster une image au TD

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown