Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Apabila Menetapkan Imej Latar Belakang Boleh Skala dalam CSS?

Imej Latar Belakang Boleh Skala: Mengekalkan Nisbah Aspek

Dalam reka bentuk web, menetapkan imej latar belakang yang sesuai dengan dimensi halaman dengan lancar boleh menjadi tugas yang sukar. Selalunya, pembangun menghadapi masalah dengan imej yang diregangkan atau dipotong secara tidak seimbang, yang membawa kepada hasil yang tidak diingini. Walau bagaimanapun, CSS3 menyediakan penyelesaian yang elegan untuk masalah ini dengan sifat saiz latar belakang.

Sifat saiz latar belakang membolehkan anda menentukan saiz imej latar belakang anda dalam pelbagai cara. Untuk mengekalkan nisbah bidang imej anda sambil memastikan ia sesuai dengan dimensi elemen badan anda, gunakan nilai penutup.

Dengan menetapkan saiz latar belakang kepada penutup, imej akan berskala secara automatik kepada saiz terkecil yang mungkin sepenuhnya meliputi kawasan kedudukan latar belakang. Ini bermakna imej akan sentiasa memenuhi keseluruhan lebar halaman, manakala ketinggiannya dilaraskan untuk mengekalkan perkadaran asal.

Sebagai contoh, pertimbangkan kod berikut:

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

CSS ini akan pastikan imej background.svg sesuai dengan keseluruhan lebar halaman, manakala ketinggiannya berskala sewajarnya untuk mengekalkan perkadarannya utuh.

Memahami Contain vs. Cover

Dalam CSS3, terdapat dua nilai utama untuk sifat bersaiz latar belakang: mengandungi dan penutup. Walaupun kedua-dua nilai mengekalkan nisbah bidang imej, ia berkelakuan berbeza.

• mengandungi: Menskalakan imej kepada saiz terbesar yang mungkin yang sesuai sepenuhnya dalam kawasan penentududukan latar belakang. Ini bermakna sesetengah kawasan di luar imej mungkin dibiarkan kosong.
• kulit: Skala imej kepada saiz terkecil yang mungkin meliputi sepenuhnya kawasan penentududukan latar belakang. Ini boleh mengakibatkan sesetengah kawasan imej dipangkas keluar.

Cara yang berguna untuk menggambarkan perbezaan antara kandungan dan penutup ialah membayangkan segi empat tepat mewakili skrin anda dan segi empat tepat mewakili imej anda.

• mengandungi: Segi empat tepat imej akan muat di dalam segi empat tepat skrin, mungkin meninggalkan ruang kosong di sekeliling itu.
• kulit: Segi empat tepat imej akan mengembang untuk mengisi segi empat tepat skrin, yang berpotensi memotong bahagian imej.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Apabila Menetapkan Imej Latar Belakang Boleh Skala dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!