ブラウザのビューポートサイズに応じて、背景画像を拡大縮小したい。
たとえば、CSSの背景をストレッチしたりスケーリングしたりするなど、その仕事をするStackOverflowに関するいくつかの質問を見てきました。うまくいきますが、タグbackgroundではなく、を使って画像を配置したいと思います。img
その1つにimgタグが配置され、CSSを使用してimgタグに敬意を表します。
width:100%; height:100%;
それは機能しますが、その質問は少し古く、CSS3では背景画像のサイズ変更がかなりうまくいくと述べています。この例を最初に試しましたが、うまくいきませんでした。
background-image宣言でそれを行うための良い方法はありますか？
CSS3 には と呼ばれる素敵な小さな属性がありますbackground-size:cover。
これにより、縦横比を維持しながら背景領域が背景画像で完全に覆われるように画像がスケーリングされます。全エリアが対象となります。ただし、リサイズした画像の幅・高さが大きすぎると、画像の一部が見えなくなる場合があります。
CSS3 プロパティを使用して、非常にうまく行うことができます。比率に合わせてサイズが変更されるため、画像の歪みはありません（ただし、小さな画像は拡大されます）。ただし、まだすべてのブラウザーに実装されているわけではありません。
background-size: 100%;
私が言及したコードを使用して...
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
これにより、目的の効果が得られます。背景ではなく、コンテンツのみがスクロールされます。
背景画像は、どの画面サイズでもブラウザのビューポートに合わせてサイズ変更されます。コンテンツがブラウザーのビューポートに収まらず、ユーザーがページをスクロールする必要がある場合、コンテンツがスクロールしている間、背景画像はビューポートに固定されたままになります。
CSS 3 を使用すると、これははるかに簡単になるようです。
CSS:
html,body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
background-size: 100% 100%;
背景を引き伸ばして、両方の軸で要素全体を埋めます。
次の CSS 部分は、すべてのブラウザーで画像を引き伸ばす必要があります。
これをページごとに動的に行います。したがって、PHP を使用して、各ページに独自の HTML タグを生成します。すべての写真は「image」フォルダにあり、「Bg.jpg」で終わります。
<html style="
background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\');
-ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>
すべてのページの背景画像が 1 つしかない場合は、$pic変数を削除し、バックスラッシュのエスケープを削除し、パスを調整して、このコードを CSS ファイルに配置します。
html{
background: url(images/homeBg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}
これは、Internet Explorer 9、Chrome 21、および Firefox 14 でテストされました。
この CSS を使用します。
background: url('img.png') no-repeat;
background-size: 100%;
実はimgタグで背景画像と同じ効果が得られます。z-index を他のすべてよりも低く設定し、position:absolute を設定し、フォアグラウンドのすべてのボックスに透明な背景を使用するだけです。
このクラスを CSS ファイルに追加できます。
.stretch {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
それはで動作します:
background-sizeれていますが、キーワードはサポートされていません)コンテナーのサイズに基づいて画像を適切にスケーリングするには、次を使用します。
background-size: contain;
background-repeat: no-repeat;
私はこれを使用していますが、すべてのブラウザで動作します:
<html>
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
<h2>Stretch that Background Image!</h2>
<p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
<p>Go on, try it - resize your browser!</p>
</div>
</body>
</html>
背景画像をページ全体に拡大せずに中央揃えにして拡大縮小したかったので、アスペクト比を維持したかったのです。他の回答で提案されたバリエーションのおかげで、これは私にとってはうまくいきました：
インライン画像：------------------------
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
CSS ----------------------------------
html {
height:100%;
}
#background {
text-align: center;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
margin: auto;
height:100%;
}
ありがとう！
しかしその後、 Google ChromeとSafariブラウザーでは機能しませんでした(ストレッチは機能しましたが、写真の高さはわずか 2 mm でした!)。
設定してみる
height:auto;min-height:100%;
だからあなたのheight:100%;行のためにそれを変更すると、次のようになります：
#### #background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:auto;
min-height:100%;
}
その新しく追加されたコードの直前に、Drupal Tenduテーマにこれがありstyle.cssます。
html、本文{高さ:100%;}
#ページ{背景:#ffffff; height:auto !important;height:100%;min-height:100%;position:relative;}
次に、次を追加しながら、Drupal 内で画像を使用して新しいブロックを作成する必要がありますclass=stretch。
< img alt="" class="stretch" src="pic.url" />
その Drupal ブロックのエディターで画像をコピーするだけでは機能しません。エディタをフォーマットされていないテキストに変更する必要があります。
幅と高さが100％の絶対divの画像に同意します。CSS で本文の幅と高さを 100% に設定し、マージンとパディングをゼロに設定してください。この方法で見つかるもう 1 つの問題は、テキストを選択するときに、選択領域が背景画像を取り囲むことがあり、ページ全体が選択された状態になるという不幸な影響を与えることです。user-select:none次のように、CSS ルールを使用してこれを回避できます。
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
width: 100%
margin: none;
padding: none;
}
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -99999;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#background img {
width: 100%;
height: 100%;
}
#main{ z-index:10;}
</style>
</head>
<body>
<div id="main">
content here
</div>
<div id="background"><img src="bg.jpg"></div>
</body>
</html>
繰り返しになりますが、ここでは Internet Explorer が悪者です。ユーザー選択オプションを認識しないためです。Internet Explorer 10のプレビューでもサポートされていないため、JavaScript を使用して背景画像の選択を防止するオプションがあります (たとえば、http ://www.felgall.com/jstip35.htm ) またはCSS 3 background-stretch メソッドを使用します。
また、SEOのために背景画像をページの下部に配置しますが、背景画像の読み込みに時間がかかりすぎる場合 (つまり、最初は白い背景)、ページの上部に移動できます。
Backstretchプラグインを使用します。複数の画像をスライドさせることもできます。コンテナ内でも機能します。このようにして、たとえば、背景の一部だけを背景画像で覆うことができます。
私でさえそれを機能させることができたので、それが使いやすいプラグインであることを証明しています:)。
1枚の画像だけでこれを実現したいですか？実際には、2 つの画像を使用してストレッチ背景に似たものを作成できるためです。たとえば、PNG画像。
私は以前にこれをやったことがありますが、それほど難しいことではありません。その上、ストレッチは背景の品質を損なうだけだと思います。また、巨大な画像を追加すると、低速のコンピューターやブラウザーの速度が低下します。