javascript - Auto-sizing text to fit image container using JS in HTML

Question

Welcome To Ask or Share your Answers For Others

javascript - Auto-sizing text to fit image container using JS in HTML

asked Feb 5, 2021 in Technique[技术] by 深蓝 (71.8m points)

I am trying to autosize text (labelled: CONTENT) to fit in image containers (Dialogue4.png) using a JS script called textFit. The problem is I cannot get the JS script to run and am getting no change in text size.

My html is as follows:

<!DOCTYPE html>
<html>
<head> 
    <title> Home Page </title>
    <meta charset="UTF-8">
    <script src="textFit.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Quantico&display=swap" rel="stylesheet"> 
    <link href="main.css" rel="stylesheet" type="text/css"/>
</head>

<body>
    <div class="banner">
        <video autoplay="" muted="false" loop="">
            <source src="Media/BackgroundClip.mp4" type="video/mp4">
        </video>
        <div id="scrollarea" class="content">
            <div class="content-wrapper">
                <div class="textbox"> <img src="Media/Dialogue4.png"> </div>
                <div class="text-wrapper">
                    <div id="container" style="width:100%;height:auto">
                          <p>
                            CONTENT CONTENT CONTENT
                          </p>
                    </div>  
                </div>
            </div>
        </div>
    </div>
    <script>    
      function doFit(){
        textFit(document.getElementById('container'), {maxFontSize: 200});
      }  
    </script>
</body>
</html>

Any advice would be seriously appreciated as I am at the bottom of a deep-dive trying to figure it out.

Thanks for your time and have a happy new year.

Betty.

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

294 views

1 Answer

深蓝 · Answer 1 · 2021-02-05T04:28:05+0000

Here is a demo:
(I simplified your HTML and made sure the element that contains the text has a defined width&height)

textFit(document.querySelector('.text-wrapper'), {
  maxFontSize: 200,
  alignHoriz: true,
  alignVert: true
});

body {
  font-family: sans-serif;
}

.content-wrapper {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid blue;
  width: 60%;
  height: 250px;
  display: block;
}

.text-wrapper {
  display: block;
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/textfit/2.4.0/textFit.min.js"></script>
<div class="banner">
  <div id="scrollarea" class="content">
    <div class="content-wrapper" style="background-image: url('https://i2.wp.com/digital-photography-school.com/wp-content/uploads/2019/05/joseph-barrientos-49318-unsplash-e1558728034701.jpg')">
      <div class="text-wrapper">
        CONTENT CONTENT CONTENT
      </div>
    </div>
  </div>
</div>

Categories

javascript - Auto-sizing text to fit image container using JS in HTML

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags