调整文字大小以适合div

时间：2018-12-19 09:56:17

标签： javascript html css twitter-bootstrap bootstrap-4

我有一个引导程序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>

1 个答案:

答案 0 :(得分：2)

这是否是您想要的事情？我使用媒体查询。尝试在浏览器上调整任何大小。

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

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

#fit1, #fit2, #fit3{
	margin: 25px;
}

.hvrbox.active .hvrbox-text_mobile {
  display: block;
}

@media (max-width: 1199px){
	#fit1, #fit2, #fit3{
	margin-top: -35px;
	font-size: 14px;
}
}

@media (max-width: 991px){
	#fit1, #fit2, #fit3{
	margin-top: -120px;
	font-size: 10px;
}

}

@media (max-width: 767px){
	#fit1, #fit2, #fit3{
	margin-top: 0px;
	font-size: 15px;
}

}

@media (max-width: 320px){
	#fit1, #fit2, #fit3{
	margin-top: -20px;
	font-size: 14px;
}
<!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://github.com/rikschennink/fitty/blob/gh-pages/dist/fitty.min.js"></script>

</body>

</html>

相关问题
最新问题