javascript - 如何修复图片元素上无响应的图片？

Question

我制作了一个网站，可以为游戏 LoL 生成动态内容。我尝试生成响应式图像网格，如您所见 here在“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 网格的掌握页面？

Answer 1

我终于使用了一个表格来定位图片。我很容易在所有设备上进行编辑和响应。