如何在图片元素上修复没有响应的图片？

Question

我制作了一个网站，为游戏LoL生成动态内容。我试图生成响应性图像网格，因为您可以在“掌握页面”选项卡下看到这里：

<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网格的掌握页面？

Answer 1

我终于用一张桌子定位了这些照片。我很容易编辑和响应所有的设备。