Javascript 在图像上具有绝对位置的响应文本大小

在响应日历图像上，我希望有一个带有日期的文本。当屏幕大小调整到图像开始调整大小时，该图像上的文本也应调整大小，以便相对于图像宽度和高度保持不变

我通过使用javascript实现了这一点，因为我无法仅使用CSS。我的问题是，我如何才能做到这一点，只有与CSS。可能吗？如果是，请在我在fiddle上创建的代码中显示：

HTML:

---

抱歉，这有点匆忙，但可能会有帮助！绿色容器仅用于测试目的

.container{
宽度：20%；
浮动：左；
背景：绿色；
}
.datePictureHolder{
宽度：自动；
浮动：左；
位置：相对位置；
}
.datePictureHolder img{
宽度：100%；
浮动：左；
}
.datePictureText{
排名：0；
左：0；
位置：绝对位置；
颜色：白色；
宽度：100%；
文本对齐：居中；
填充：40%0；
框大小：边框框；
字号：1.2rem；
}

2017
25二月

抱歉，这有点匆忙，但可能会有帮助！绿色容器仅用于测试目的

.container{
宽度：20%；
浮动：左；
背景：绿色；
}
.datePictureHolder{
宽度：自动；
浮动：左；
位置：相对位置；
}
.datePictureHolder img{
宽度：100%；
浮动：左；
}
.datePictureText{
排名：0；
左：0；
位置：绝对位置；
颜色：白色；
宽度：100%；
文本对齐：居中；
填充：40%0；
框大小：边框框；
字号：1.2rem；
}

2017
25二月

您可以使用媒体查询或使用em作为字体来获得结果

html{
字体大小：16px；
@介质（最小宽度：800px）{
字号：18px；
}
@介质（最小宽度：1200px）{
字体大小：20px；
}
}
.字体大小{
字号：0.5em；
}

---

Text Text

您可以使用媒体查询或使用em作为字体来获得结果

html{
字体大小：16px；
@介质（最小宽度：800px）{
字号：18px；
}
@介质（最小宽度：1200px）{
字体大小：20px；
}
}
.字体大小{
字号：0.5em；
}

---

Text Text

老实说，我认为您只需使用CSS就可以实现这一点。试试media query或em.@Luke，您的建议是根据查看端口更改字体大小。图像不会像那样调整大小。将其绘制为SVG并像图像一样缩小，怎么样？否则，您可以简单地使用CSS转换比例。老实说，我认为您可以只使用CSS来实现这一点。试试media query或em.@Luke，您的建议是根据查看端口更改字体大小。图像不会像那样调整大小。将其绘制为SVG并像图像一样缩小，怎么样？否则，您可以简单地使用CSS变换比例。

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

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

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