Monster Evolve2

by stot

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<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">
        <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:280px;text-align:left;font-size:30px;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="me-monster-name">New Monstername <span class="me-rarity">&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</span></div>
        
        
        <div class="p-stats p-border1" style="position:absolute;top: 525px;height: 200px;">
          
            <div class="mc-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)"></div>
                <div style="background-image:url(http://www.playa.cc/pic/orb-light4.png);-webkit-filter:grayscale(1)"></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>
          ...

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-monster-icon {
    background-image: url(http://www.playa.cc/pic/monster-icon.png);
    width: 104px;
    height: 104px;
    background-size:104px 104px;
    background-repeat:no-repeat;
    
}

.me-rarity {
        color: gold;
    display:block;
}

.me-monster-name {
    font-size: 30px;
    position: absolute;
    top: 445px;
    width: 100%;
    text-align: center;
}

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)'
});