CSS - 使文本在响应图像上保持在同一位置

Question

我正在尝试让文字在响应式图像上停留在同一个位置。

我的HTML是：

<div class="container">
    <img src="http://i.imgur.com/K6XP6tp.png" alt="">
    <div class="counter">
        <span class="days">1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <div class="counter2">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</div>

CSS：

.container {
    position: relative;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
   height: auto;
}

.days {
    position: absolute;
    top: 30%;
    left: 50%;
}

.counter span {
    font-size: 25px;

}

不能使这项工作。我创建了一个jsfiddle。任何想法如何使这项工作？