Question

几个小时我正在努力制作具有增长/缩小的文本的响应式图像并且最终制作它...（上次我使用的是html / css是12年前）有一件事情是困扰的我，是否可以增加＆＃34;文本框＆＃34;？

的宽度

绿色 - 包含文字的div的实际尺寸，
红色 - 文本要浮动的div的所需大小

＆＃13;

<html>
   <link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Tangerine">
   <link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Lato">
   <head>
   </head>
   <div style="position: relative;
      display: inline-block;">
   <img style=" display: block;" src="http://wordpress1793681.home.pl/autoinstalator/wordpressplus2/wp-content/uploads/2018/03/contact2darker.jpg" alt="" width="512" height="215" />
   <div style=" position: absolute;
      top: 50%;
      left: 50%;
      transform: translate( -50%, -50% );
      text-align: center;
      color: white;
      text-align: center;
      ">
   <p style="line-height: 1; margin-bottom: 0px;margin-top: 0px; font-size: 4.5vw; font-weight: 600;">CONTACT US LOREM IPSUM </p>
   <p style="line-height: 1; margin-bottom: 0px;margin-top: 0px; font-size: 3.75vw; font-weight: 300;">LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM </p>
   </body>
</html>

＆＃13;

Answer 1

您可以简单地在包含文本的元素上放置width。（为了清楚起见，我将一个CSS块放入一个类名而不是将其保留在HTML中;您应该考虑对CSS的其余部分执行相同操作，因为它会使维护更容易。）

＆＃13;

.textContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50%);
  text-align: center;
  color: white;
  width: 80%;
}

＆＃13;

<div style="position: relative;
      display: inline-block;">
  <img style=" display: block;" src="http://wordpress1793681.home.pl/autoinstalator/wordpressplus2/wp-content/uploads/2018/03/contact2darker.jpg" alt="" width="512" height="215" />
  <div class="textContainer">
    <p style="line-height: 1; margin-bottom: 0px;margin-top: 0px; font-size: 4.5vw; font-weight: 600;">CONTACT US LOREM IPSUM </p>
    <p style="line-height: 1; margin-bottom: 0px;margin-top: 0px; font-size: 3.75vw; font-weight: 300;">LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM </p>
  </div>
</div>

＆＃13;

图像上的响应文本

1 个答案: