如何将矩形分成相等数量的正方形？

Question

假设我有一个<div>矩形，大小为1400x700像素。我们称之为“画布”。

如果你愿意，我想用一些放大的“像素”填充它 - 随机颜色和不透明度的正方形。随机。有些会淡入，有些会淡出。这很容易。

HTML结构应如下所示：

div#canvas
  div.pixel
  div.pixel
  div.pixel
  div.pixel

如何获取矩形的原始尺寸并获得一些方形div，这些div保证将整个“画布”填充到边缘？

在：

在：

正方形的大小应该以某种方式变化。这个想法是以背景图像“像素化”，但是起伏不定，尽管这是一个心理问题，而不是编程问题。

Answer 1

对于每个“像素”，你真的需要一个单独的dom元素吗？我考虑使用一个带有自定义背景渐变的单个元素，如下所示：

http://lea.verou.me/css3patterns/#checkerboard