Почему мое изображение не загружается на полный размер?

Мне нужно сделать табличную раскладку и сделать мою таблицу шириной 550 пикселей. И затем я загрузил изображение с оригинальной шириной 550 пикселей, но в браузере у меня всего 449 пикселей. Я хочу сделать на полной ширине. А также у меня есть дополнительное пространство между ячейками.Почему мое изображение не загружается на полный размер?

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

источник

2013-02-13 Dan Ovidiu Boncut

«Мне нужно сделать табличный макет» - неужели? Пожалуйста, не надо. Это облегчит вашу жизнь, вы будете богаче, богаче, более привлекательны, и ваш вечный звук не будет казаться таким запятнанным. Просто говорю. –

Я понимаю, что вы говорите: P Но у меня нет времени спорить об этом - это были мои спецификации –

Столбы ваших таблиц неравномерны. У вас есть 3 строки, первые 2 имеют 1 столбец, а последний имеет 2 столбца. Даже если у вас есть правильные проценты, лучше распределить их равномерно. Например, все 3 строки имеют или «занимают пространство» 2 столбца.

Что я имею в виду, так это то, что вместо использования ширины вы должны использовать colspan. Также удалите ширину изображения, если вы хотите его оригинальный размер, он должен получить его по умолчанию.

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

Надеюсь, это решит вашу проблему.

источник

2013-02-13 19:27:03 mojarras

Это помогло, и это ответило на мой вопрос. Но есть еще одно, о котором я не упомянул: my border-top.png имеет высоту 10 пикселей, а td - 20 пикселей. Никаких дополнений, без полей, я ничего не могу понять, даже если я ставлю 10px height на мой td - как вы можете видеть в моем примере. Любые идеи, почему? –

Хм, это странно. Попробуйте проверить TD, TR и IMG, используя вкладку Layout Firebug, которая должна дать вам точные размеры всего, как padding, margin, border. Может быть, стиль унаследован где-то. Также вы можете попробовать установить высоту в TR вместо TD. – mojarras

Это была самая странная вещь. В макете Firebug указана высота 10 пикселей для изображения без прокладки, границы, контура, поля, ничего и 20 пикселей для td, который имеет высоту 10 пикселей, но ничего. Я нашел решение и установил высоту линии: 1px для td, и он работал, даже если не было четкого объяснения. –

Почему мое изображение не загружается на полный размер?

ответ

Смежные вопросы