css - Twitter Bootstrap : how to align text on an image, 以便在调整浏览器大小时缩放？

Question

我在尝试在大图像上放置一些文本和按钮时遇到问题。 我已经成功地用CSS做了一个部分解决方案，但我的问题是，每当我缩小浏览器窗口时，文本+按钮的大小不会随着图像缩小......这使得一切都变得非常难看。

有一些(简单的)解决方案吗？

我的CSS:

titleImageDiv { 
  position: relative; 
  width: 100%; /* for IE 6 */
}

#titleImageCaption { 
  position: absolute; 
  top: 10%;
  left: 2%;
}

#titleImageButton { 
    position: absolute;
    top: 75%;
    left: 2%; 
}

我的 HTML

<div class='row'>
  <div class='span12' id='titleImageDiv'>
    <img alt='Image' src='/assets/my_caption_pic.jpg'>
    <h1 id='titleImageCaption'>SOME CAPTION</h1>
    <form action="/someaction class="button_to" method="post">
      <div>
      <input class="btn btn-large" id="titleImageButton" type="submit" value="PRESS COOL BUTTON!" />
      </div>
    </form>
</div>

Answer 1

尝试使用媒体查询......例如:如果查看区域小于 600 像素，则将应用此 CSS。

@media screen and (max-width: 600px) {
  #titleImageDiv { ..}

#titleImageCaption { }

#titleImageButton { }

}

您可以使用不同的 CSS 来使用不同的查询...... 希望以下链接可以帮助您...http://webdesignerwall.com/tutorials/css3-media-queries