画像内の円内に反応的なテキストを取得するには

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-scriptやcssでは可能ではないようです。

Answer 1

これはcssのvw機能を使用して行うことができます。 これを試し、ビューポートの値の正しい％を決定してください。以下の例を例として使用することができます。タグを段落タグに切り替えてください。

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