Bagaimana untuk Mencipta Imej Latar Belakang Responsif Skrin Penuh Menggunakan Yayasan?

Mencipta Imej Latar Belakang Responsif Skrin Penuh

Sebagai orang baru dalam pembangunan Front-end, anda menghadapi cabaran dalam mencapai penuh -skrin imej latar belakang responsif menggunakan rangka kerja Yayasan. Kod CSS anda menskalakan imej dengan sewajarnya tetapi gagal memaparkan keseluruhan imej. Selain itu, anda berhasrat untuk meletakkan div lajur .large-6 large-offset-6 anda di atas imej latar belakang pada peranti mudah alih.

Untuk menangani kebimbangan anda, mari semak pelaksanaan HTML dan CSS anda dan teroka penyelesaian alternatif:

Pendekatan HTML dan CSS Alternatif:

Untuk pelaksanaan yang lebih mudah, pertimbangkan kod berikut:

<div class="main-header">

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

Dengan menambah ketinggian: 100%; limpahan: tersembunyi; kepada .main-header, keseluruhan imej akan kelihatan tanpa menatal. Kelas susun semula-pada-mudah alih dan pertanyaan media yang disertakan memastikan bahawa lajur .large-6 large-offset-6 muncul di atas imej latar belakang pada peranti mudah alih dengan melaraskan susunan paparannya.

Penyelesaian Latar Belakang Lengkap:

Sebagai alternatif, anda boleh meneroka penyelesaian komprehensif berikut untuk mencipta latar belakang responsif skrin penuh imej:

• Css-Tricks: Imej Latar Belakang Halaman Penuh Sempurna: https://css-tricks.com/perfect-full-page-background-image/

• Menggunakan JavaScript untuk mengurus saiz dan kedudukan imej:

  <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);
    }
  }

  Oleh memahami prinsip asas dan menggunakan teknik ini, anda boleh mencipta imej latar belakang responsif yang meningkatkan daya tarikan visual dan pengalaman pengguna aplikasi Front-end anda.

  Atas ialah kandungan terperinci Bagaimana untuk Mencipta Imej Latar Belakang Responsif Skrin Penuh Menggunakan Yayasan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!