Monster Evolve

by stot

HTML

<link rel="stylesheet" href="http://local.playa.cc/css/mobile.min.css">
<div id="page" style="position:relative">
    <canvas id="canvas" width="200" height="200"></canvas>
    <div id="monster123" class="p-monstercard" style="font-size:24px">
        <img class="mc-monster" src="http://www.playa.cc/pic/monster-shadow.png" style="bottom:657px" />
        <img class="mc-monster" src="http://local.playa.cc/pic/tiger_A_flarion.png" />
        <div style="position:absolute;top:285px;text-align:left;font-size:20px;width:100%">Fodder<span style="float:right;color:gold">Coins: 3.000</span>

        </div>
        <div class=" me-fodder">
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
        </div>

        
        <div class="p-stats p-border1" style="position:absolute;top:475px;height:250px">
            
            <div>New Monstername <span class="me-rarity">&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</span></div>
            <div class="p-monster-icon" style="position: absolute; top: 60px;"></div>
            <div class="mc-vertical-attributes">
                <div style="background-image:url(http://www.playa.cc/pic/orb-red4.png)" />999</div>
            <div style="color:#00ff00;font-weight:bold;background-image:url(http://www.playa.cc/pic/orb-green4.png)">999</div>
            <div style="background-image:url(http://www.playa.cc/pic/orb-blue4.png);-webkit-filter:grayscale(1)">&nbsp;</div>
            <div style="background-image:url(http://www.playa.cc/pic/orb-light4.png);-webkit-filter:grayscale(1)">&nbsp;</div>
            <div style="background-image:url(http://www.playa.cc/pic/orb-dark4.png)">999</div>
            <div style="color:#ff00ff;font-weight:bold;background-image:url(http://www.playa.cc/pic/orb-heart.png)">5</div>
        </div>
        <div...

CSS

.p-monstercard .me-fodder {
    position:absolute;
    top:315px;
    text-align:center;
    margin:0 auto;
    left:0;
    right:0;
    font-size:20px;
        justify-content: space-around;
    display: flex;
}

.p-monstercard .mc-vertical-attributes {
    position: absolute;
    top: 60px;
    left: 120px;
}
.p-monstercard .mc-vertical-attributes div {
    width: 130px;
    background-position: left top;
    background-size: 50px;
    background-repeat: no-repeat;
    float: left;
    /* padding-left: 40px; */
    text-align: right;
    margin-left: 20px;
    /* padding-right: 10px; */
    height: 60px;
    /* vertical-align: text-bottom; */
    font-size: 30px;
    line-height: 50px;
}

.p-monster-icon {
    background-image: url(http://www.playa.cc/pic/monster-icon.png);
    width: 104px;
    height: 104px;
    
}

.me-rarity {
        color: gold;
    float: right;
}

.me-hitpoints {
    background: url(http://www.playa.cc/pic/heart1.png) left center no-repeat;
    background-size: 50px;
    /* width: 25%; */
    text-align: right;
    /* position: absolute; */
    width: 130px;
    float: right;
    font-size: 30px;
    height: 50px;
    line-height: 50px;
}

.me-additional-stats {
        position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.me-skill-name {
    background: url(http://www.playa.cc/pic/orb-red4.png) left center no-repeat;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    background-size: 50px;
    text-align: right;
    /* width: 500px; */
    padding-left: 60px;
    float: left;
}

JavaScript

var maxWidth = window.innerWidth; // Max width for the image
var maxHeight = window.innerHeight; // Max height for the image

var ratio = [maxWidth / 640, maxHeight / 960];
ratio = Math.min(ratio[0], ratio[1]);

var correction = (maxWidth < 640) ? (640 - maxWidth) / 2 : 0;

$('#monster123').css({
    'transform': 'matrix(' + ratio + ', 0, 0, ' + ratio + ', -' + correction + ', 0)',
        '-webkit-transform': 'matrix(' + ratio + ', 0, 0, ' + ratio + ', -' + correction + ', 0)'
});