Question

我有一张图片，遗憾的是它不能用作背景图片，上面有一个文本框。它可以工作，但它没有响应，使用bootstrap 4.当我达到较小的屏幕尺寸时，文本框超出了图像。

在初始尺寸下它很好但是一旦缩小页面，文本框就会弹出。这是HTML：

git pull

这是CSS：

<div class="container-fluid something-container">
<div class="row">
<img class="img-responsive something-img" src="http://placehold.it/900x100"/>
<div class="container">
  <div class="row something-front d-flex justify-content-center">
    <div class="col-sm-8 something-text text-center">
      <h1>Header</h1>
      <p>Here are some words but typically a lot more are present here.</p>
    </div>
</div>

我创建了一个CodePen来显示它：CodePen

如何让该文本框保留在图像中？

Answer 1

将图片和文字包裹在.image-wrapper之类的包装div中，如下所示：

<div class="container-fluid something-container">
  <div class="row">
    <div class="container">
      <div class="row something-front d-flex justify-content-center">
        <div class="image-wrapper">
          <img class="img-responsive something-img" src="http://placehold.it/900x100" />
          <div class="col-sm-8 something-text text-center">
            <h1>Header</h1>
            <p>Here are some words but typically a lot more are present here.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.image-wrapper {
  width: 900px;
  height: 100px;
  position: relative;
  margin: 0 auto;
}

.something-img {
  width: 100%;
  height: auto;
}

.something-text {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  height: 90%;
}

这使得定位到父元素的工作成为可能，您可以独立地设置图像和文本的样式，同时保持框尺寸相同/响应。字体大小必须随着大小的增加/缩小而改变以保持在框中，但文本将以图像为中心。

如何在图像上保持文本框响应？

1 个答案: