これらはストレッチ画像です。

「不可能」なサイトを描くデザイナーが大好きです。 これにより、酸味が抑えられ、新しいレイアウトソリューションを探すことができます。 これらの解決策の1つは、「ゴム非反復バックグラウンド」の使用でした。

このソリューションは、画像の垂直座標と水平座標の関係に基づいています。 つまり、画像が高さのみを示している場合、幅は元の比率に従って変化します。

アイデアの本質は、小さなサイズ（およびボリューム）の背景画像がbodyのスタイルシートではなく、サイトページのimgタグから直接挿入されることです。



HTML：

< img src="url" class="body-img" alt="" title=""



/>



CSS：

.body-img{

position: absolute;

top: 0;

left: 0;

z-index: -1;

width: 100%;

}









メソッドの視覚的な実装： http : //marow.ru/site/sadik/40/



さらに、元の画像のサイズを小さくするために背景画像を挿入するこの方法。 これは、高解像度を必要とする画像には適用されません。 しかし、実践が示すように、ほとんどの場合、背景画像はぼやけて不定形のものです。



欠点は、このメソッドがセマンティクスの考慮事項とコンテンツからの構造の分離に対応していないことです。

bodyタグのマージンとパディングの値を指定する機能も失われます。 そうしないと、画像は全画面に拡大されません。



主なものについて。



ie6では、この方法で作成された背景の上にマウスを移動すると、ImageToolbarウィンドウが表示され、行為の印象全体が損なわれます。 幸いなことに、これはかなり簡単に解決できます。 サイトの「ヘッド」にメタタグをインストールするだけで十分です。これにより、 ImageToolbarがページ領域全体に表示されなくなります。



< meta http-equiv="imagetoolbar" content="no"



/>



背景画像として使用することに加えて、高さが幅に応じて変化するブロックを作成する必要がある場合（たとえば、ページをスケーリングする場合）、高さと幅の依存性の効果を適用できます。 このブロック内に指定された比率で透明な画像を配置するだけです。

例。