Изображение растягивается неожиданно в td

Я просто новичок, но я работаю с этой проблемой часами.Изображение растягивается неожиданно в td

Применение изображения в td увеличит всю таблицу до странного размера и разрушит все. Таблица 500 x 500 и 5 столбцов и строк, для этого gif необходимы 2 столбца. Размер gif составляет 200 x 200. Но почему это так растягивается?

Перед нанесением GIF:

link

код, прежде чем GIF здесь:

<!DOCTYPE html> 

<html> 

    <head> 
    </head> 

    <body bgcolor="#264663"> 
     <table style="width:500px;height:500px;table-layout:fixed;" bgcolor="#fddab4" align="center" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="1"> 
      <tr> 
       <td colspan="5"></td> 
      </tr> 
      <tr> 
       <td rowspan="4" colspan="2"></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td colspan="2" rowspan="2"></td> 
      </tr> 
      <tr> 
       <td></td> 
      </tr> 
     </table> 
    </body> 

</html>

И после того, как:

<!DOCTYPE html> 

<html> 

<head> 
</head> 

<body bgcolor="#264663"> 
    <table style="width:500px;height:500px;table-layout:fixed;" bgcolor="#fddab4" align="center" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="1"> 
     <tr> 
      <td colspan="5"></td> 
     </tr> 
     <tr> 
      <td rowspan="4" colspan="2"></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td colspan="2" rowspan="2"><img style="display:block;" width="100%" src="/pics/meanwhileatnintendo.gif" /></td> 
     </tr> 
     <tr> 
      <td></td> 
     </tr> 
    </table> 
</body> 

</html>

EDIT: Я попытался удалить Height = "100 % ", но тогда это происходит:

LINK HERE

источник

2016-10-21 Selsku

Успокойся;) Серьезно, хотя я собираюсь отредактировать все шапки, на минутку и прочитать http://stackoverflow.com/help/how-to-ask –

100% высокая проблема.

<td colspan="2" rowspan="2"><img style="display:block;" width="100%" src="/pics/meanwhileatnintendo.gif" /></td>

Пока ваше изображение квадратное, это должно работать.

источник

2016-10-21 20:10:42 Jeff

По-прежнему выравнивается неправильно. – Selsku

По-видимому, после нескольких часов проб и ошибок, это работает:

Image

<head> 
</head> 

<body bgcolor="#264663"> 
    <table style="table-layout:fixed;width:500px;height:500px;border-collapse:collapse;" bgcolor="#fddab4" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td colspan="5" background="/pics/5to1.jpg" height="100" width="100"></td> 
     </tr> 
     <tr> 
      <td rowspan="4" colspan="2" height="400" width="200"></td> 
      <td height="100" width="100"></td> 
      <td height="100" width="100"></td> 
      <td height="100" width="100"></td> 
     </tr> 
     <tr> 
      <td height="100" width="100"></td> 
      <td height="100" width="100"></td> 
      <td height="100" width="100"></td> 
     </tr> 
     <tr> 
      <td height="100" width="100"></td> 
      <td height="200" colspan="2" rowspan="2" width="200" style="background-image:url(/pics/meanwhileatnintendo.gif)"> 
      </td> 
     </tr> 
     <tr> 
      <td height="100" width="100"></td> 
     </table> 
</body>

Но я хочу знать, что существует ли более эффективная и короче w чтобы ячейки сохраняли свои размеры даже при добавлении контента!

Это была моя проблема: ячейки меняли размер даже от добавления в них одной буквы. Теперь, когда я определил размер каждой ячейки отдельно, ячейки больше не будут изменяться, и это здорово! Но, тем не менее, для такой простой проблемы требуется много набора текста. Любым другим путем?

источник

2016-10-22 11:21:55 Selsku

Изображение растягивается неожиданно в td

ответ

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