Pourquoi mon image ne se charge pas en taille réelle?

Je dois faire une disposition basée sur la table et fait ma largeur de table 550px. Et puis j'ai chargé une image avec la largeur originale de 550px mais sur le navigateur j'ai seulement 449px. Je veux faire en pleine largeur. Et aussi j'ai plus d'espace entre les cellules.Pourquoi mon image ne se charge pas en taille réelle?

<table style="width:550px;margin:0 auto;" cellspacing="0" cellpadding="0" border="0"> 
      <tr style="margin:0; padding:0;"> 
       <td style="font-size:12px; line-height: 12px; width: 100%; text-align: right; color:#5A99B1;">Click <b>here</b> for the online version</td> 
      </tr> 
      <tr> 
       <td style="width:100%; height:10px;" cellspacing="0" cellpadding="0"> 
        <img style="width: 100%;" src="border-top.png" /> 
       </td> 
      </tr> 
      <tr> 
       <td style="width:50%; background-color:white;"> 
        <img src="brugadalogo.png" /> 
       </td> 
       <td style="width:50%; background-color:white; text-align: right;"> 
        <img src="msdlogo.png" /> 
       </td> 
      </tr> 
     </table>

Source

2013-02-13 Dan Ovidiu Boncut

"Je dois faire une mise en page basée sur la table" - Avez-vous vraiment? S'il vous plaît ne le faites pas. Cela vous rendra la vie plus facile, vous serez plus riche, plus riche, plus attrayant et votre éternel ne sera pas aussi terni. Je dis juste. –

Je comprends ce que vous dites: P Mais je n'ai pas le temps de discuter à ce sujet - ce sont mes spécifications –

Vos colonnes de table ne sont pas uniformément uniformes. Vous avez 3 lignes, les 2 premières ont 1 colonne et la dernière a 2 colonnes. Même si vous avez les bons pourcentages, il est préférable de le distribuer uniformément. Telles que les 3 lignes ont ou "prennent l'espace de" 2 colonnes. Ce que je veux dire par là est qu'au lieu d'utiliser des largeurs, vous devez utiliser colspan. Retirez également la largeur de l'image, si vous voulez sa taille d'origine, il devrait l'obtenir par défaut.

<table style="width:550px;margin:0 auto;" cellspacing="0" cellpadding="0" border="0"> 
      <tr style="margin:0; padding:0;"> 
       <td **colspan="2"** style="font-size:12px; line-height: 12px; text-align: right; color:#5A99B1;">Click <b>here</b> for the online version</td> 
      </tr> 
      <tr> 
       <td **colspan="2"** style="height:10px;" cellspacing="0" cellpadding="0"> 
        <img src="border-top.png" /> 
       </td> 
      </tr> 
      <tr> 
       <td style="background-color:white;"> 
        <img src="brugadalogo.png" /> 
       </td> 
       <td style="background-color:white; text-align: right;"> 
        <img src="msdlogo.png" /> 
       </td> 
      </tr> 
     </table>

Espérons que cela résout le problème.

Source

2013-02-13 19:27:03 mojarras

Cela m'a aidé et cela a répondu à ma question. Mais il y en a un de plus que je n'ai pas mentionné: mon border-top.png a une hauteur de 10px mais le td a 20px. Aucun rembourrage, aucune marge, rien que je puisse comprendre, même si je mets 10px de hauteur à mon td - comme vous pouvez le voir dans mon exemple. Toute idée pourquoi? –

Hmm, c'est bizarre. Essayez d'inspecter les TD, TR et IMG en utilisant l'onglet Mise en page de Firebug, qui devrait vous donner les dimensions exactes de tout comme le remplissage, la marge, la bordure. Peut-être qu'il y a un style hérité quelque part. Vous pouvez également essayer de régler la hauteur sur le TR au lieu du TD. – mojarras

C'était la chose la plus étrange. Disposition de Firebug dit 10px hauteur pour l'image sans rembourrage, bordure, contour, marge, rien et 20px pour td, qui a forcé la hauteur de 10px mais rien. J'ai trouvé une solution et j'ai défini line-height: 1px pour td et ça a marché même s'il n'y avait pas d'explication claire. –

Pourquoi mon image ne se charge pas en taille réelle?

Répondre

Questions connexes