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

メディアクエリを使用してみてください。例：TこのCSSは、表示領域が600pxよりも小さい場合に適用されます。

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

#titleImageCaption { }

#titleImageButton { }

}

あなたは異なるCSSで異なるクエリを利用することができます....次のリンクがあなたを助けることを願っています...http://webdesignerwall.com/tutorials/css3-media-queries

于 2012-10-01T13:34:47.033 に答える