我制作了一个网站，为游戏LoL生成动态内容。我试图生成一个响应图像网格，正如你在"Mastery Page"选项卡下看到的那样：
<img src="//lolstats.org/data/img/lol/custom/masteryback.png" style="position: relative; top: 0; left: 0;"/>
<?php
$length = sizeof($masteries[$summoner_id]['pages'][0]['masteries']);
for($i = 0; $i < $length; $i++){
$id = $masteries[$summoner_id]['pages'][0]['masteries'][$i]['id'];
$ranks = 1;
$ranks = $masteries[$summoner_id]['pages'][0]['masteries'][$i]['rank'];
$possition = $api->getMasteryPossition($id);
$x = $possition['x'] + 510;
$y = $possition['y'];
echo '<img src="//lolstats.org/data/img/lol/custom/mastery_background.png"
style="position: absolute; top: '. ($y - 2).'px; left: '. ($x - 2) .'px;" height="52" width="52"/>';
echo '<img src="//lolstats.org/data/img/lol/mastery/'.$id.'.png"
style="position: absolute; top: '. $y .'px; left: '. $x .'px;" height="48" width="48"/>';
echo '<h1 style="position: absolute;
top: '.($y - 15 ) .'px; left: '. ($x +15 ).'px;">'.$ranks.'</h1>';
}
?>
</div>
我读过一些关于图像地图、jQuery插件等的文章，但它们并不能解决动态图片内容的问题。我试着用PHP生成一个PNG，但我不想为任何用户生成5个或更多的PNG。
有没有一种更智能、更简单的方法，用响应式x和y网格生成Mastery Pages？
我最后使用了一个表来定位图片。我很容易在所有设备上进行编辑和响应。