2

我在尝试将一些文本和按钮放在大图像上时遇到问题。我已经设法用 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>
4

1 回答 1

2

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

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

#titleImageCaption { }

#titleImageButton { }

}

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

于 2012-10-01T13:34:47.033 回答