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%;}

p.s。在更大的屏幕尺寸下可能会导致错误。在这种情况下，您需要使用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>

Answer 2

尝试

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

和

#col1{
overflow:hidden;
}