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">
<pre class="brush:php;toolbar:false">@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 class="background-image lazy" src="/static/imghwm/default1.png" data-src="bg.jpg" alt="">

  $(document).ready(function() {
    scaleBackground();
  });
  
  $(window).resize(function() {
    scaleBackground();
  });
  
  function scaleBackground() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
  
    if (windowWidth / windowHeight 

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.