javascript - Bootstrap - 让文本 div 在图像大小上动态调整大小

Question

我正在学习 Bootstrap 并有一个包含一行和一列的容器，其中包含以下类:

col-lg-4 col-md-6 col-sm-12

在列内，我有一个带有图像的 div 和另一个包含文本的名为 img-text 的 div。我已将 img-text 格式化为显示在图像上，但希望 div 在调整页面大小时动态地跨越图像。请查看图片了解更多详情。

这是我目前所拥有的。

.img_text {
  height: 60px;
  width: 90.5%;
  background-color: #4aaaa5;
  position: absolute;
  top: 65%;
  color: white;
  font-family: 'Georgia', Times, Times New Roman, serif;
  font-size: 1.5em;
  padding-top: 20px;
  text-align: center;
  z-index: 1;
}

<div class='col-lg-4 col-md-6 col-sm-12' id='col1'>
  <img src='img/ph1.jpg' class='img-responsive' />
  <div class='img_text'>Apples</div>
</div>

Answer 1

调整.img_text{width: 100%;}

附注它可能会导致更大屏幕尺寸的错误。在这种情况下，您需要使用 media rules

.img_text {
  height: 60px;
  width: 100%;
  background-color: #4aaaa5;
  position: absolute;
  top: 65%;
  color: white;
  font-family: 'Georgia', Times, Times New Roman, serif;
  font-size: 1.5em;
  padding-top: 20px;
  text-align: center;
  z-index: 1;
}

<div class='col-lg-4 col-md-6 col-sm-12' id='col1'>
  <img src='img/ph1.jpg' class='img-responsive' />
  <div class='img_text'>Apples</div>
</div>