Не могу получить блок тегов div для правильной организации

Question

Я использую этот блок кода (в основном, скопирован из комментария PHP.net здесь - http://www.php.net/manual/en/function.imagecolorat.php), чтобы читать изображение, сканировать его попиксельно и выводить изображение в виде блока divтеги в виде таблицы. Вот что я придумал ...

<?php 
$img = imagecreatefrompng("image1.png"); 

$w = imagesx($img); 
$h = imagesy($img); 

for($y=0;$y<$h;$y++) { 
   for($x=0;$x<$w;$x++) { 
      $rgb = imagecolorat($img, $x, $y); 
      $r = ($rgb >> 16) & 0xFF; 
      $g = ($rgb >> 8) & 0xFF; 
      $b = $rgb & 0xFF;
      $hex = "#".str_repeat("0",2-strlen(dechex($r))).dechex($r). 
              str_repeat("0",2-strlen(dechex($g))).dechex($g). 
              str_repeat("0",2-strlen(dechex($b))).dechex($b);
     echo "<div style='background: {$hex}; height: 5px; width: 5px; display: inline;'></div>\r\n";
     /*
        echo "#".str_repeat("0",2-strlen(dechex($r))).dechex($r). 
              str_repeat("0",2-strlen(dechex($g))).dechex($g). 
              str_repeat("0",2-strlen(dechex($b))).dechex($b).","; 
     */ 
  } 
  echo "<br />\r\n"; 
} 
?>

Я пытался использовать 'block', 'inline', 'inline-block' и 'inline-table'для свойства display у div, но каждый из них, похоже, создает свои собственные проблемы. Я либо ничего не получаю, либо столбцы пикселей идут вертикально вниз по вертикали, либо div правильно выстраиваются в квадрат, но с промежутками между ними(что не должно происходить, так как я использую reset.css, чтобы устранить все отступы, интервалы и т. д.).

Кроме того, эта конкретная функция, кажется, не учитывает прозрачность.Команда using имеет прозрачные пиксели и выводит их светло-голубым цветом.

Ссылка - http://schnell.dreamhosters.com/folio/pixelread.php

Answer 1

Ну, это интересный. Я не могу поручиться за эту функцию с учетом прозрачности, но проблема позиционирования HTML должна быть достаточно простой для решения.

Я думаю, что лучшим решением было бы создать контейнер шириной, равной изображению, а затем переместить все оставшиеся div. Что-то вроде

echo "<div style='width: ".($imagesx * 5)."px;' class='outer'>";

Что даст нужную вам ширину (если я правильно понимаю код). Тогда вы просто используете этот CSS:

.outer div {
  width: 5px;
  height: 5px;
  float: left;
}

Это позволит эффективно сократить количество избыточных встроенных стилей, которые вы должны сгенерировать. Да, и удалите br, генерируемое после каждой строки.

Что касается проблемы альфа-прозрачности, я считаю, что этот комментарий должен помочь вам: http://www.php.net/manual/en/function.imagecolorat.php#79116

---

Редактировать

Вы забыли px на width: 65px! Это генерируется.

<div style='width: 65; background: #eeeeee; margin: 0px auto;'>

Кроме того, милый Марио. ;)

Answer 2

 echo "<div style='background: {$hex}; height: 5px; width: 5px; position: absolute; top: {$y * 5}; left: {$x * 5};'></div>\r\n";

Вы хотите поместить их все в position: relative; содержащий элемент.И, вероятно, удалить <br> с.