Question

我创建了一个为LoL游戏生成动态内容的网站。我尝试生成响应式图片网格，您可以在“掌握页面”标签下看到here：

<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

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

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

1 个答案: