Question

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

是否有一些（简单）的解决方案？

我的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

Twitter Bootstrap：如何对齐图像上的文本，以便在调整浏览器大小时进行缩放？

1 个答案: