Foundation を使用して全画面対応の背景画像を作成するには?

全画面対応の背景画像の作成

フロントエンド開発の初心者として、フルスクリーンの背景画像を作成する際に課題に直面しています。 - Foundation フレームワークを使用した画面応答性の背景画像。 CSS コードは画像を適切に拡大縮小していますが、画像全体を表示できません。さらに、.large-6large-offset-6 columns div をモバイル デバイスの背景画像の上に配置することを目指しています。

懸念に対処するために、HTML と CSS の実装を確認し、代替ソリューションを検討してみましょう。

代替 HTML および CSS アプローチ:

より単純な実装については、次のことを検討してください。コード:

<div class="main-header">

@media screen and (max-width: 768px) {
  .reorder-on-mobile {
    order: -1;
  }
}

高さを追加することで: 100%;オーバーフロー: 非表示; .main-header に追加すると、画像全体がスクロールせずに表示されます。 reorder-on-mobile クラスと付随するメディア クエリは、表示順序を調整することで、.large-6large-offset-6 列がモバイル デバイス上の背景画像の上に表示されるようにします。

完全な背景ソリューション:

または、次の包括的なソリューションを検討して、全画面の応答性の高い背景を作成することもできます。画像:

• CSS-Tricks: 完璧なフルページ背景画像: https://css-tricks.com/perfect-full-page-background-image/

• JavaScript を使用して画像のサイズ変更を管理し、配置:

  <img src="bg.jpg" class="background-image" alt="" />

  $(document).ready(function() {
    scaleBackground();
  });
  
  $(window).resize(function() {
    scaleBackground();
  });
  
  function scaleBackground() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
  
    if (windowWidth / windowHeight < 0.5625) { // Aspect ratio of your image
      $(".background-image").height(windowHeight);
      $(".background-image").width(windowWidth / 0.5625);
    } else {
      $(".background-image").width(windowWidth);
      $(".background-image").height(windowHeight / 0.5625);
    }
  }

  基礎となる原理を理解し、これらのテクニックを採用することで、フロントエンド アプリケーションの視覚的な魅力とユーザー エクスペリエンスを向上させる応答性の高い背景画像を作成できます。 .

  以上がFoundation を使用して全画面対応の背景画像を作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。