如何使字体大小响应占据背景图像上的相同空间

Question

你可以帮助我让这个“邮票”响应吗？

我希望字体（数字和文本）在背景图像上占据相同的空间，因此无论视口大小如何，图章都保持干净。 不使用css vw vh等...因为它必须适用于旧浏览器。

    <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>

由于

http://jsfiddle.net/5x5jfcyu/

Answer 1

最好的答案是使用em或rem单位，包括容器的高度和内部文本的字体大小。

更新小提琴： http://jsfiddle.net/5x5jfcyu/

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

#tamponBLfactor_welcomepage img {
    height:100%;
}