To get a responsive text inside a circle within image

Question

I am trying to get a text inside a circle which text size behave respectively to its outer div width. The text shouldn't overflow outside of the circle in every width and also the circle should be responsive as respectively to the width of the image.

The text field is dynamic and also it is multi-language so in German it will be "Wärmflaschen" so the circle also needs to be a fixed as in both language but text size should only very as of the circle.

Snippet:

.em-site1 img {
  width: 100%
}
.em-site-links-left-block {
  background-color: #eb8677;
  opacity: 0.8;
  text-align: center;
  color: white;
  white-space: nowrap;
  border-radius: 50%;
  padding: 10%;
  bottom: 5%;
  position: absolute;
  left: 30%;
}
.em-site-links-left-block h3 {
  margin: 5px -40px;
  font-size: 1.9em;
}

<div class="container">
  <div class="col-md-4 col-sm-4 col-xs-12 box em-site1">
    <img src="http://emosan.grafikpeople.com/wp-content/uploads/2016/06/Warmflasxhen_620x570_acf_cropped_620x570_acf_cropped.jpg">
    <div class="em-site-links-left-block">
      <h3 class="resize">Bouteilles <br> d'eau chaude</h3>
    </div>

  </div>
  <div class="col-md-4 col-sm-4 col-xs-12 box em-site1">
    <img src="http://emosan.grafikpeople.com/wp-content/uploads/2016/06/Warmflasxhen_620x570_acf_cropped_620x570_acf_cropped.jpg">
    <div class="em-site-links-left-block">
      <h3 class="resize">Bouteilles <br> d'eau chaude</h3>
    </div>

  </div>
  <div class="col-md-4 col-sm-4 col-xs-12 box em-site1">
    <img src="http://emosan.grafikpeople.com/wp-content/uploads/2016/06/Warmflasxhen_620x570_acf_cropped_620x570_acf_cropped.jpg">
    <div class="em-site-links-left-block">
      <h3 class="resize">Bouteilles <br> d'eau chaude</h3>
    </div>

  </div>
</div>

Also you can view my code here. I have tried giving css with media query and with different class as of multi-language but cannot get the right solution but it seems possible with java-script or css doesn't matter.

Your wp requires authentication, else your fiddle is unable to be viewed correctly. — Ctc, Jun 27 '16 at 06:24
I still get an authentication error and the fiddle does not appear correct ): — Ctc, Jun 27 '16 at 06:33
It is correct as i have have tried opening it form another PC. May be you should try hard refresh bro — Sus Hill, Jun 27 '16 at 06:37
This is not possible for dynamic text without javascript. CSS can't detect the text length and then draw a square (or circle) around it. — Paulie_D, Jun 27 '16 at 11:44

score 0 · Answer 1 · answered Jun 27 '16 at 07:02

This can be done via using the vw function in your css. Experiment with it and determine the correct % of the value in the viewport. You can use the one below as an example. Make sure you switch your tags to the paragraph tag.

p { font-size: 3.2vw; font-size: 3.2vh; }

To get a responsive text inside a circle within image

1 Answers1