画像上に絶対位置のある応答テキストサイズ

Question

応答可能なカレンダー画像では、日付付きのテキストが必要です。画面のサイズを変更して画像のサイズ変更を開始すると、その画像上のテキストも同様にサイズが変更され、画像の幅と高さに合わせて変わらないようにする必要があります。

私はJavaScriptを使用して、私は唯一のCSSでそれを行うことができなかったとしてことを達成しています。私の質問は、私はCSSだけでそれをどうやって行うことができるかということです。出来ますか？

https://jsfiddle.net/bej0od7r/

HTML：：

<div class="datePictureHolder"> 
    <img class="img-responsive" alt="News Icon" src="http://shrani.si/f/u/13K/4rB6HshN/news-icon.png"/> 
    <div class="datePictureText"> 
    <div class="year">2017</div> 
    <div class="day">25. Feb</div> 
    </div> 
</div> 

JAVASCRIPT

ResizeDateIcons(); 

window.onresize = function() { 
    ResizeDateIcons(); 
}; 
function ResizeDateIcons() { 
    // constants 
    var imageWidth = 150; // width and height must be the same 
    var dayTextSize = 36; // text size on maximum image width 
    var yearTextSize = 23; // text size on maximum image width 
    var yearLineHeigh = 70; 
    // 
    var allImages = document.getElementsByTagName("img"); 
    var allDayTexts = document.getElementsByClassName("day"); 
    var allYearTexts = document.getElementsByClassName("year"); 
    var j = 0; 
    for (var i = 0; i < allImages.length; i++) { 
    if (allImages[i].alt === "News Icon") { 
     allDayTexts[j].style.fontSize = (allImages[i].width/imageWidth) * dayTextSize + "px"; 
     allYearTexts[j].style.fontSize = (allImages[i].width/imageWidth) * yearTextSize + "px"; 
     allYearTexts[j].style.lineHeight = (allImages[i].width/imageWidth) * yearLineHeigh + "px"; 
     j++; 
    } 
    } 
} 

CSS：

.datePictureHolder { 
    position: relative; 
    display: inline-block; 
} 

.datePictureText { 
    position: absolute; 
    left: 0; 
    top: 5%; 
    width: 100%; 
    text-align: center; 
    color: white; 
} 

.datePictureText .year { 
    font-size: 23px; 
    line-height: 70px; 
} 

.datePictureText .day { 
    font-size: 36px; 
    font-weight: bold; 
} 

.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

Answer 1

そうならば、その私はフィドルに作成したコードで表示してください

申し訳ありませんが、これは少し急いでいますが、役立つかもしれません！緑色のコンテナは、テスト目的でのみ存在します。

https://codepen.io/anon/pen/gxwZge

.container { 
 
    width:20%; 
 
    float:left; 
 
    background:green; 
 
} 
 
.datePictureHolder { 
 
    width:auto; 
 
    float:left; 
 
    position:relative; 
 
} 
 
.datePictureHolder img { 
 
    width:100%; 
 
    float:left; 
 
} 
 
.datePictureText { 
 
    top:0; 
 
    left:0; 
 
    position:absolute; 
 
    color:white; 
 
    width:100%; 
 
    text-align:center; 
 
    padding:40% 0; 
 
    box-sizing:border-box; 
 
    font-size:1.2rem; 
 
}

<div class="container"> 
 
<div class="datePictureHolder"> 
 
    <img class="img-responsive" alt="News Icon" src="http://shrani.si/f/u/13K/4rB6HshN/news-icon.png"/> 
 
    <div class="datePictureText"> 
 
    <div class="year">2017</div> 
 
    <div class="day">25. Feb</div> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

あなたは、私は、どちらかのメディアクエリを使用するか、正直に言うとフォントのため

html { 
 
     font-size: 16px; 
 

 
     @media (min-width: 800px) { 
 
     font-size: 18px; 
 
     } 
 

 
     @media (min-width: 1200px) { 
 
     font-size: 20px; 
 
     } 
 
    } 
 

 
<!--- or try em for mobile web dev. 1em is 16px--> 
 
.font-resize { 
 
    font-size : 0.5 em; 
 
}

<div>Text Text</div>