3

Web ページの背景として 1 つの大きな画像があります。画像には、画像自体の中にボックスが含まれています。ボックスに収まるようにその背景画像にテキストを配置し、それに応じて縮小またはサイズ変更するにはどうすればよいですか (背景のサイズが変更されたときに他の解像度で)。

4

3 に答える 3

3

テキストを含む「ボックス」のサイズを変更する場合は、CSS を使用して要素の寸法をパーセンテージ ベースの幅と高さの値に設定できるはずです。

要素内のテキストのサイズを変更する場合は、JavaScript (おそらく jQuery) を使用して、設定された間隔でウィンドウのサイズをポーリングし、新しいウィンドウのサイズに基づいてテキスト サイズを調整することを検討してください。

編集：明確にするために、テキストボックス（おそらくdiv）のサイズをページのパーセンテージに設定できるはずです。たとえば、テキストを含む div は、ウィンドウの幅の 80%、高さの 80% になる可能性があります。その後、マージンを「自動」に設定できます。これにより、ボックスの周囲の余白と寸法がウィンドウの幅に比例するようになります。

例：

 <style type="text/css">
    div#box {
    height: 80%;
    width: 80%;
    margin: auto;
    }
</style>
<div id="box">Text goes here.</div>

これにより、「ボックス」div がページの水平方向の中央に配置されますが、垂直方向の中央揃えは少しトリッキーです。このページを見て、背景のボックス内にとどまるように垂直方向に中央揃えする方法を理解することをお勧めします。

他の個人が示唆しているように、ボックスの背景を、ページ全体の背景ではなく、テキストのコンテナーの背景にすることもできます。これは少し簡単かもしれませんが、パーセンテージベースの幅と高さの属性と自動マージンを使用して、適切に中央に配置する必要があると思います.

于 2010-12-29T06:29:04.117 に答える
2

まず、背景画像のサイズを変更することはできません。また、テキストのサイズを変更するには、Javascript またはページの更新が必要になります。

http://www.jsfiddle.netで例を作成してみてください。そうすれば、人々はあなたが説明していることをよりよく理解できます。

アップデート

あなたの質問はまだ不明であり、jsfiddle を強くお勧めします。しかし、私の解釈が正しければ...あなたは FancyBox を使用しています。これは、ページを実行する Javascript があることを示唆しています。Javascript を使用して、テキストがコンテナーからはみ出しているかどうかを確認し、それに応じてサイズを変更できます。

これを行うには、<div>(またはコンテナ要素) を取得し、そのプロパティを確認し.scrollHeightます.clientHeight。スクロールがクライアントよりも小さい場合、テキストのサイズを変更する必要はありません。スクロールがクライアントよりも大きい場合は、.style.fontSizeプロパティでサイズを変更できます。

私が説明していることのテストされていない例は次のとおりです。

myDiv = $('containerElement'); // Get container object using its ID
size = 50;  // Start with 50px font size

while(myDiv.scrollHeight > myDiv.clientHeight) {
  // Decrement font size until scroll is less than client
  myDiv.style.fontSize = (size - 1) + 'px';
}

好きなように動作させるには、これに少し手を加える必要があります。注意事項:

  • ドル関数を使用してオブジェクトを取得しました。詳細については、Google で検索できます
  • コンテナー.clientHeightを見つけるには、定義済みの寸法が必要です
  • .offsetHeight代わりに試す必要があるかもしれません.clientHeight

オーバーフローを制御するだけの場合は、CSS を使用できます。

  • overflow-x:hiddenまたはスクロールまたは自動、overflow-y同じです
  • white-space:nowrapテキストの自動折り返しを防ぎます

しかし、繰り返しますが、あなたが何を求めているのか（コードで）明確ではないため、私の答えはあいまいです。

于 2010-12-29T06:18:22.507 に答える
1

あなたのソリューションの問題は、それが非常に拡張性が低く、さまざまなブラウザーに優しくなく、Web サイトが拡大するにつれてさらに多くの問題が発生することです。

ボックスを他の背景画像から分離し、ボックス画像をテキストを含む div の背景として使用してみてください。

于 2010-12-29T07:50:10.663 に答える