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

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%;
}