Javascript 调整文本大小以适应div

我有一个引导程序4

容器

在断点上方的屏幕大小上容纳3列md（

col-md-4

）

在每一列中，我都有一个

img流体
类的
img
，其文本描述显示在悬停位置。我想让这个悬停文本与每个
img流体的响应性大小适当缩放，以便它始终精确地位于图像顶部

我当前的尝试是，当图像调整文本溢出其容器的大小时-我想通过相应地调整文本大小以适应容器来阻止这种情况发生

我已经试过了，它对普通文本非常有效，但不会像我希望的那样影响我的悬停文本

我有没有做错什么，或者有没有更好的方法（最好使用现有的bootstrap4类）来实现这一点


//fitty（'.fit'）；
健康（‘我的健康’）；
fitty（'fit1'）；
fitty（“#fit2”）；
fitty（“#fit3”）
.hvrbox{
位置：相对位置；
显示：内联块；
溢出：隐藏；
最大宽度：100%；
高度：自动；
}
.hvrbox.hvrbox-layer\u顶部{
不透明度：0；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：350px；
高度：350px；
背景：rgba（11,11,28,0.71）；
颜色：#fff；
-moz转换：所有0.4都可以轻松地输入输出0；
-webkit过渡：所有0.4s都易于输入输出0；
-ms转换：所有0.4s易于输入输出0s；
过渡：所有0.4s均为0进0出；
}
.hvrbox:hover.hvrbox-layer_top，
.hvrbox.active.hvrbox-layer_-top{
不透明度：1；
}
.hvrbox.hvrbox文本{
宽度：100%；
显示：内联块；
空白：nowrap；
}
.hvrbox.hvrbox-text_mobile{
字体大小：15px；
边框顶部：1px实心rgb（179179179179）；/*适用于旧浏览器*/
边框顶部：1px实心rgba（1791791790.7）；
边缘顶部：5px；
垫顶：2件；
显示：无；
}
.hvrbox.active.hvrbox-text_mobile{
显示：块；
}

标题
你好，世界
Lorem ipsum dolor sit amet，一位杰出的领导者，一位伟大的领袖
暂时性的劳工和财产损失。这是一个小小的节日
ullamco Laboraris nisi ut aliquip ex ea commodo consequat实习。
两人或两人在一起是因为他们在一起是因为他们在一起
多洛雷欧盟福吉亚无巴黎。不可因疏忽而导致死亡的例外情况，不应构成过失
这是我的工作
在全方位错误情况下的透视图
劳丹蒂姆、普雷姆·雷姆·雷姆·雷姆·雷姆·雷姆·雷姆、雷姆·雷姆·雷姆·雷姆·雷姆·雷姆·雷姆·雷姆·雷姆、雷姆·雷姆·雷姆·雷姆·雷姆·雷姆·雷姆·雷姆·雷姆·雷姆
建筑师比泰·维塔·迪克塔必须解释清楚。尼莫·埃尼姆·伊普萨姆·沃卢帕塔姆·奎亚·沃卢帕塔斯·西特
无论你是谁，你都应该为自己的行为负责
sequi nesciunt。
这是你想要的吗？我使用媒体查询。尝试调整浏览器上的任何大小


.hvrbox{
位置：相对位置；
显示：内联块；
溢出：隐藏；
最大宽度：100%；
高度：自动；
}
.hvrbox.hvrbox-layer\u顶部{
不透明度：0；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：350px；
高度：350px；
背景：rgba（11,11,28,0.71）；
颜色：#fff；
-moz转换：所有0.4都可以轻松地输入输出0；
-webkit过渡：所有0.4s都易于输入输出0；
-ms转换：所有0.4s易于输入输出0s；
过渡：所有0.4s均为0进0出；
}
.hvrbox:hover.hvrbox-layer_top，
.hvrbox.active.hvrbox-layer_-top{
不透明度：1；
}
.hvrbox.hvrbox文本{
宽度：100%；
显示：内联块；
}
.hvrbox.hvrbox-text_mobile{
字体大小：15px；
边框顶部：1px实心rgb（179179179179）；
/*对于旧浏览器*/
边框顶部：1px实心rgba（1791791790.7）；
边缘顶部：5px；
垫顶：2件；
显示：无；
}
#fit1，#fit2，#fit3{
利润率：25px；
}
.hvrbox.active.hvrbox-text_mobile{
显示：块；
}
@介质（最大宽度：1199px）{
#fit1，#fit2，#fit3{
利润上限：-35px；
字体大小：14px；
}
}
@介质（最大宽度：991px）{
#fit1，#fit2，#fit3{
利润上限：-120px；
字体大小：10px；
}
}
@介质（最大宽度：767px）{
#fit1，#fit2，#fit3{
边际上限：0px；
字体大小：15px；
}
}
@介质（最大宽度：320px）{
#fit1，#fit2，#fit3{
利润上限：-20px；
字体大小：14px；
}

标题
你好，世界
知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。
两人或两人在无财产权的情况下受到谴责。除偶尔因疏忽而死亡外，不得因工作过失而受到动物的虐待
对于所有人都存在的错误，我们必须清楚地认识到这一点，因为我们需要赞美、尊重他人、尊重发明者的真实性和准建筑学，所以我们必须清楚地认识到这一点