CSS背景のストレッチとスケール

CSSで背景をコンテナの大きさに合わせて伸縮させる方法はありますか?

現在はありません。CSS 3]1で利用可能になる予定ですが、ほとんどのブラウザに実装されるまでには時間がかかるでしょう。

解説 (5)

一言で言えば「いいえ」です。画像を引き伸ばすには、``タグを使うしかありません。工夫が必要ですね。

この答えが書かれた2008年には、これは真実でした。最近のブラウザは background-size をサポートし、この問題を解決しています。IE8はそれをサポートしていないので注意してください。

解説 (1)

ストレッチ&スケール」の定義は...。

ビットマップ形式の場合、それを引き伸ばしたり、引っ張ったりすることは、一般的には(グラフィック的には)あまりよくありません。 繰り返し可能なパターンを使うことで、同じ効果があるように見せることができます。 例えば、ページの下部に向かって明るくなるグラデーションがある場合、幅1ピクセル、高さがコンテナと同じ(もしくはスケーリングを考慮して大きい方が良い)グラフィックを使用し、それをページ全体にタイル状に配置していきます。 同様に、グラデーションがページを横切る場合は、高さ1ピクセルでコンテナの幅よりも広く、ページの下に向かって繰り返すことになります。

通常は、コンテナが大きくなったり小さくなったりしたときに、コンテナいっぱいに画像が伸びるように見せるために、コンテナよりも画像を大きくします。 重なった部分は、コンテナの枠外には表示されません。

縁が曲がっている箱のようなものに依存した効果を得たい場合は、箱の左側をコンテナの左側に、(無理のない範囲で)コンテナがどんなに大きくなっても背景が足りなくならない程度の重なりで貼り付け、次に縁が曲がっている箱の右側の画像を重ねてコンテナの右側に配置します。 このようにして、コンテナが縮んだり大きくなったりすると、カーブしたボックスの効果もそれに合わせて縮んだり大きくなったりするように見えます。実際には縮まないのですが、そのように錯覚してしまいます。

実際にコンテナに合わせて画像を縮小・成長させるには、画像を背景として機能するように見せるレイヤリングトリックと、コンテナに合わせて画像のサイズを変更するためのjavascriptが必要になります。 現在のところ、CSSでこれを行う方法はありません...。

ベクターグラフィックを使っているのであれば、残念ながら私の専門外です。

解説 (2)