【发布时间】：2018-12-19 09:56:16
【问题描述】：
我有一个引导程序 4 container 在断点 md (col-md-4) 上方的屏幕尺寸上保存 3 列。
在每一列中，我都有一个 img 类 img-fluid，它有一个悬停时出现的文本描述。我希望通过每个img-fluid 的响应式调整大小来适当地缩放此悬停文本，以便它始终精确地适合图像顶部。
我目前的尝试是，当图像调整文本大小时会溢出其容器 - 我想通过响应调整文本大小以适应容器来阻止这种情况的发生
我试过fitty，它非常适合普通文本，但不会像我希望的那样影响我的悬停文本。
我做错了什么，还是有更好的方法（最好使用现有的 bootstrap 4 类）来实现这一点？
// fitty('.fit');
fitty('#my_fit');
fitty('#fit1');
fitty('#fit2');
fitty('#fit3');.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 350px;
height: 350px;
background: rgba(11, 11, 28, 0.71);
color: #fff;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
width: 100%;
display: inline-block;
white-space: nowrap;
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
<meta http-equiv="content-type" content="text/html"/>
<title>Title</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="container mt-5">
<div class="row border">
<div id='my_fit'>Hello World</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-md-4 mb-3 text-center">
<div class="hvrbox zoom">
<img src="https://pbs.twimg.com/profile_images/378800000601617732/9e87878ffdd67333ac8b81f9da22696a_400x400.jpeg" alt="person" class="img-fluid mx-auto d-block zoom"
height="350" width="350">
<div class="fit hvrbox-layer_top img-fluid d-flex align-items-center" width="350" height="350">
<div class="fit" id="fit1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 text-center">
<div class="hvrbox zoom">
<img src="https://pbs.twimg.com/profile_images/378800000601617732/9e87878ffdd67333ac8b81f9da22696a_400x400.jpeg" alt="person" class="img-fluid mx-auto d-block zoom"
width="350" height="350">
<div class="hvrbox-layer_top img-fluid d-flex align-items-center" width="350" height="350">
<div class="hvrbox-text fit" id="fit2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 text-center">
<div class="hvrbox zoom">
<img src="https://pbs.twimg.com/profile_images/378800000601617732/9e87878ffdd67333ac8b81f9da22696a_400x400.jpeg" alt="person" class="img-fluid mx-auto d-block zoom"
width="350" height="350">
<div class="hvrbox-layer_top img-fluid d-flex align-items-center fit" width="350" height="350">
<div class="hvrbox-text fit" id="fit3">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
sequi nesciunt.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/fitty@2.2.6/dist/fitty.min.js"></script>
</body>
</html>【问题讨论】：
标签： javascript html css twitter-bootstrap bootstrap-4