响应文本大小，绝对位置超过图像

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用媒体查询或使用em for fonts

来获得结果

＆＃13;

＆＃13;

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

＆＃13;

<div>Text Text</div>

＆＃13;

＆＃13;

＆＃13;