如何在桌面网站上设置最大宽度的自适应字体大小？

Question

我正在尝试在图像上方放置一段文本。图片将是产品的图片，我必须说明客户的文字在该产品上的外观。

技巧是：

• 文本和背景图片需要响应
• 桌面网站的最大宽度

这是我到目前为止的sample project here，但是我认为必须对示例文本的文本大小进行一些数学运算（使用css calc（）函数）< / p>

边界

（这些不会停留并且在那里可以更好地理解职位）

• 图像内部有黑色边框，它们显示图像的结尾以及文本需要放置的位置
• 红色边框是图像和覆盖文字的容器
• 绿色边框是重叠文本的容器
• 绿色边框（再次）是图像

body {
  background-color: grey;
  padding: 0;
  margin: 0 auto;
}
input {
  font-family: inherit;
  color: green;
}

@media (min-width: 1024px) {
  body {
max-width: 600px;
  }
}

#sample-container {
  position: relative;
  width: 100%;
  z-index: 1;
  border-style: solid;
  border-color: red;
  box-sizing: border-box;
}
#sample-image {
  position: relative;
  width: 100%;
  z-index: 1;
  border-style: solid;
  border-color: green;
  box-sizing: border-box;
}
#sample-text {
  z-index: 2;
  position: absolute;
  top: 36%;
  right: 58%;
  width: 25%;
  text-align: right;
  font-size: 5vw;
  color: blue;
  transform: rotate(-16deg);
  border-style: solid;
  border-color: green;
  box-sizing: border-box;
}

<div id="sample-container">
  <img id="sample-image" src="images/sample-image.png">
  <div id="sample-text">SAMPLE</div>
</div>  

问题：

• 在页面为桌面模式（宽页面，大于1024像素）时，具有相对于视口的字体大小会使自定义文本离开其指定区域，这是因为页面的视口变得比的“指定/可绘制”部分宽页面