Bagaimanakah Saya Boleh Membuat Skala Imej Latar Belakang Secara Berkadar untuk Sesuai dengan Lebar Halaman?

Menskalakan Imej Latar Belakang Secara Berkadar: Mengekalkan Lebar dan Melaraskan Ketinggian Secara Automatik

Imej Latar Belakang Sesuai untuk Lebar, Auto Skala Tinggi

Untuk mencapai kesan yang diingini di mana lebar imej latar belakang sepadan dengan lebar halaman sementara ketinggiannya berskala secara automatik, kita boleh memanfaatkan Sifat saiz latar belakang CSS3. Dengan menetapkannya kepada penutup, kami mengarahkan penyemak imbas untuk menskalakan imej kepada saiz terkecil di mana kedua-dua lebar dan tinggi meliputi sepenuhnya kawasan kedudukan latar belakang.

Pelaksanaan Kod

Berikut ialah coretan kod CSS untuk laksanakan kesan ini:

body {
    background-image: url(images/background.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;  /* Optional, center the image */
}

Sebagai penambahbaikan tambahan, kita boleh menggunakan argumen pilihan untuk kedudukan latar belakang tengahkan imej secara menegak dan mendatar.

Eggsplanation untuk berisi dan penutup

Untuk menjelaskan perbezaan antara kandungan dan penutup, mari kita gunakan contoh:

Contain :

<img src="https://i.sstatic.net/mAtCl.png" alt="Contain example">

Imej terkandung dalam kawasan kedudukan latar belakang, meninggalkan ruang kosong diisi dengan warna latar belakang.

Sampul:

<img src="https://i.sstatic.net/p96P5.png" alt="Contoh muka depan">

Imej menutup sepenuhnya kawasan kedudukan, tetapi sebahagian daripadanya mungkin dipangkas.

Kesimpulan

Dengan menggunakan saiz latar belakang: penutup, anda boleh mencipta imej latar belakang responsif yang berskala secara automatik agar sesuai dengan lebar halaman sambil mengekalkan perkadarannya. Teknik ini membolehkan reka bentuk yang lancar dan menarik secara visual yang menyesuaikan dengan saiz skrin yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Skala Imej Latar Belakang Secara Berkadar untuk Sesuai dengan Lebar Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!