在图像

Question

我试图在圆圈内得到一个文本，文本大小分别表现为它的外部div宽度。文本不应该在每个宽度的圆圈之外溢出，并且圆圈应该分别响应图像的宽度。

文本字段是动态的，也是多语言的，因此在德语中它将是“Wärmflaschen”，因此圆圈也需要固定为两种语言，但文本大小应该只是圆形。

段：

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

您还可以查看我的代码here。 我试过用媒体查询给css和多语言的不同类，但无法得到正确的解决方案，但似乎有可能与java脚本或CSS无关紧要。

Answer 1

可以使用vw中的css功能完成此操作。 试验它并确定视口中值的正确％。您可以使用下面的一个作为示例。确保将标记切换到段落标记。

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