1

私は、em ベースのレイアウトの Web サイトで作業しています (ユーザーがフォント サイズを増減したときに、適切に拡大および縮小できます)。このサイトには、すべてのページに表示されるヘッダーがあります。すべてのページに「ヘッダー」div があり、サイト全体の css ファイルには次のコードが含まれています。

#header
{
    width: 50em;
    height: 6em;
    margin-bottom: .5em;
    background: url("/IMAGES/header.png");
}

問題は、これが実際にはうまく伸びないことです。テキストのサイズが大きくなると、高さと幅が変わりますが、**画像のサイズは大きくなりません。単純に繰り返す*.*

繰り返したり途切れたりするのではなく、画像を引き延ばしたりつぶしたりするにはどうすればよいですか? (可能であれば、css ベースのソリューションが必要です... いくつかの html のアイデアが既に用意されています)。

4

4 に答える 4

0

私が今までに見つけた唯一の方法は次のとおりです。

  • #header の背景をヘッダー画像の bgcolor に設定します。
  • #header 内に新しい div を配置します
  • ヘッダー画像を 2 つに分割
  • 新しい画像の左半分を #header backgroundaligned-left として設定します
  • 新しい画像の右半分を #header.div 背景として設定します。

もちろん、それは適切な画像でのみ機能します。

于 2008-12-10T01:13:36.607 に答える
0

背景画像のスケーリングを変更できないと確信しています。header.png ファイルがimgタグとして含まれている場合、その高さと幅を数値に設定するemsと、ブラウザーがサイズを変更します (通常はがらくたのように見えます)。

同様に、最近のほとんどすべてのブラウザーはページのズーム機能を備えていることも覚えておいてください。これにより、レイアウトをあまり変更せずにすべてを拡大できます。おそらく、ユーザーにその機能を使用するように伝えますか?

于 2008-12-10T01:14:20.927 に答える
0

css を使用して背景画像を引き伸ばす方法はありません。JavaScript などを使用する必要があります。ただし、繰り返す必要のない画像 (背景に溶け込むなど) がある場合は、次のようにすることができます。

background-position: center center;
background-repeat: no-repeat;

補遺: 位置の形式は次のとおりです: <top|center|bottom|xpos> <left|center|right|ypos> xpos と ypos は通常の方法 (em、px、% など) で指定できます。 .

于 2008-12-10T01:14:34.843 に答える
0

@Pianosaurus、あなたのアイデアは限られていますが、最も単純かもしれません。単純に、画像を引き伸ばさないでください。ただし、引き伸ばされていないときに見栄えがよくなるようにしてください (中央に配置し、繰り返さないようにします)。また、ヘッダー画像の端にかなりの量のパディングを使用する場合、ページのサイズを小さくしても、それほど大きな問題は発生しません.

于 2008-12-10T01:21:30.740 に答える