CSS-使文本在响应图像上停留在同一位置

Question

I'm trying to make text stay on same place on responsive image.

The HTML I have is:

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

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

}

cannot make this work. I created a jsfiddle . Any ideas how to make this work?

Answer 1

You should do this from an image within the flux, so it allows it's container (here body) to grow.

then your 30% comes efficient (25% used inthe snippet below). :):

 .container { position: relative; } .container img { display: block; width: 100%; } .days {/* other spans to position through coordonates as well */ position: absolute; top: 25%; left: 50%; } [class*="counter"] span { font-size: 25px; position: absolute; } 

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