how to make the font size responsive to occupy the same space over the background image

Question

can you help me make this "stamp" responsive ?

I would like the fonts (numbers and text) to keep occupying the same space over the background image, so the stamp stays clean whatever the viewport size. Without using css vw vh, etc... because it must work on old browsers.

    <div id="tamponBLfactor_welcomepage" class="tampon" >
                <div class="userWeightInOtherUnit rotateimagecredits">    </div>
                <div class="userWeight"></div>
                <img class="tamponImg" src="images/tampon100px.png" />
                <div class="levelText rotateimagecredits">LEVEL</div>
                <div class="userLevel"></div>
            </div>

Thanks

http://jsfiddle.net/5x5jfcyu/

Answer 1

The best answer is to use em or rem units, for everything including the height of the container and the font sizes of the text inside.

Updated fiddle : http://jsfiddle.net/5x5jfcyu/

#tamponBLfactor_welcomepage {
    position: relative;
    text-shadow: none;
    height: 6rem;
    display: inline-block;
}

#tamponBLfactor_welcomepage img {
    height:100%;
}