1

私の目標は、ホームページ上の4つまたは5つの画像を循環する、ジェネシスの子テーマにフルサイズの背景画像を追加することです。これは、後続の各ページ（またはその子）に対応する静止画像です。

ここで進捗状況を確認できます：http：//devel.hodgsonco.com

サイクリングの部分は機能します。これは素晴らしいことですが、フルスクリーンの部分は機能しません。画像の側面が切り取られるように、画像をブラウザのサイズに一致させたいのですが、高さは正確です。画像が歪んでほしくない。

これが私がサイクリングパートを機能させる方法です。ここでチュートリアルに従いました：http： //www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html

これは私のfunctions.phpにあります：

add_action('genesis_before_header', 'add_bg_images_html');
function add_bg_images_html () {
  echo '<!-- jQuery handles to place the header background images -->
  <div id="headerimgs">
  <div id="headerimg1" class="headerimg"></div>
  <div id="headerimg2" class="headerimg"></div>
  </div>';
}

そして、私のCSSでこれを少し：

.headerimg { 
background-position: center top; 
background-repeat: no-repeat; 
/* Set rules to fill background */
min-height: 100%;
/*  min-width: 100%; */
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
width: 100%; 
height:auto; 
position:absolute;
}

そして、ここに魔法をかけるjavascriptファイルがあります：

http://devel.hodgsonco.com/wp-content/themes/ionclub/js/script.js?ver=3.3.2

スクリプトに含まれているアニメーションコントロールは必要なかったので、そのスクリプトから多くのことをコメントアウトしました。

ですから、私の問題は、画像が素晴らしくて大きいことです（幅1680ピクセル、他の大きな数字の高さ）が、小さいウィンドウでは画像の上部だけが表示されます。

それで、私は何を間違っているのですか、それとも私がすべきことをしていないのですか？これをかわいくて派手に見せるための方法はありますか？

前もって感謝します！

4

3 に答える 3

1

使用するのは、CSS3 プロパティ「background-size」です。W3 Schoolsで詳しく読むことができます。Modernizrを含めると、フォールバック サポートも提供できます。

とにかく、次のように背景を設定するだけです。

background-size:cover;

それだけです。「カバー」は、縦横比を歪めることなく要素の領域を埋めるように背景画像をスケーリングするように設定します。

于 2012-06-12T18:39:23.457 に答える
0

この質問への回答を確認することをお勧めします。画像を設定することで、やりたいことができるようです

position:absolute;
z-index:-1;
height:100%;
overflow:hidden;
于 2012-06-12T18:38:28.930 に答える
0

CSS3 を使用せずにスケーラブルにしたい場合は、background-image プロパティを使用できません。実際の画像を使用して、ウィンドウのサイズにまたがる div の幅または高さ (この場合は高さ) に合わせてスケーリングする必要があります。

CSS 背景のストレッチとスケーリング

于 2012-06-12T18:40:32.753 に答える