javascript - 将文本置于图像之上(并使其响应)？

Question

在第 2 栏，我尝试将“WHAT”文本置于图像的中心。

<div class="row">
  <div class="col-2">
     <div class="stackParent">
           <img class="stack-Img" src="img/base.png">
           <div class="stack-Txt">
              <div class="fourWsText stack-Txt-child">WHAT</div>
           </div>
     </div>
  </div>
  <div class="col-10">
    ...Variable length content...
  </div>
</div>

当我们调整浏览器大小时，行高将发生变化，以便 col-10 中的所有内容都适合。我使用 object-fit:contain 来保持图像比例正确。 我需要“stack-Txt”div 来调整图像的大小，以便文本保持在图像的中心

或者也许您知道实现此目标的更好方法？

当前的想法:将 WHAT 放入另一个子 div 中，使用 justify-content/align-items 制作 Flex 居中文本&JS addEventListener 来调整窗口大小，获取 img div 并将 nextSibling 大小设置为等于此。

这些是某个时候的 css 类...但唯一重要的是 img 不会溢出 col-2 或高度(根据 col-10 的长度而变化)

.stackParent {
  position: relative;
  object-fit: contain;
  max-width: inherit;
  height: 20vh;
}

.stack-Txt {
  position: absolute;
  text-align: center;
  width: 100%;
  max-height: 15vh;
  min-height: 15vh;
  z-index: 4;
}

.stack-Txt-child {
}

.stack-Img {
  position: absolute;
  object-fit: contain;
  max-width: inherit;
  min-height: 15vh;
  max-height: 15vh;
  top: 0%;
  left: 0%;
  z-index: 3;
}

*注意:我也有媒体查询来调整文本大小，但这应该不会产生影响。

Answer 1

如果您使用 Bootstrap 5，您只需使用内置类即可实现此目的。

• 申请.position-relative转到主div父级
• 申请.img-fluid至<img />使图像响应
• 申请.position-absolute , .top-50 , .start-50 , translate-middle到 stack-Txt 将其在图像上垂直和水平居中。

<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17757878636463657667572239263924" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
  <div class="col-2">
    <div class="stackParent position-relative">
      <img class="stack-Img img-fluid" src="https://source.unsplash.com/random">
      <div class="stack-Txt position-absolute top-50 start-50 translate-middle">
        <div class="fourWsText stack-Txt-child text-white">WHAT</div>
      </div>
    </div>
  </div>
  <div class="col-10">
    ...Variable length content...
  </div>
</div>

如果不这样做，只需按如下方式编辑 CSS:

.stackParent {
  position: relative
}


/* make image responsive */
.stack-Img {
  max-width: 100%;
  height: auto;
}

.stack-Txt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63010c0c17101711021323564d524d50" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
  <div class="col-2">
    <div class="stackParent">
      <img class="stack-Img" src="https://source.unsplash.com/random">
      <div class="stack-Txt">
        <div class="fourWsText stack-Txt-child">WHAT</div>
      </div>
    </div>
  </div>
  <div class="col-10">
    ...Variable length content...
  </div>
</div>