Bagaimanakah Saya Boleh Membuat Imej Latar Belakang CSS Sesuai dengan Lebar dan Auto-Skala Tinggi Secara Proporsional?

Imej Latar Belakang CSS agar Sesuai Lebar, Tinggi kepada Skala Auto mengikut Perkadaran

Masalah

Dalam CSS, menetapkan imej latar belakang dengan lebarnya sama kepada lebar halaman dan ketinggian yang ditetapkan untuk mengekalkan perkadaran imej boleh menimbulkan cabaran, terutamanya apabila ia berkaitan dengan pemangkasan menegak dan imej peletakan.

Penyelesaian: saiz latar belakang: penutup

CSS3 menawarkan sifat saiz latar belakang, yang membolehkan kawalan ke atas saiz imej. Dengan menetapkan saiz latar belakang: penutup, anda boleh menskalakan imej kepada saiz terkecil yang meliputi sepenuhnya kawasan kedudukan latar belakang sambil mengekalkan nisbah bidang.

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

Tetapan ini memastikan imej latar belakang meliputi lebar halaman. , dan ketinggiannya diskalakan dengan sewajarnya, menghasilkan tindak balas yang diingini dan gelagat pemangkasan.

Perbandingan kandungan dan penutup

Harta bersaiz latar belakang menawarkan dua nilai tambahan, mengandungi dan penutup, yang memberikan gelagat penskalaan yang berbeza:

• mengandungi: Memastikan imej sesuai dalam kawasan penentududukan latar belakang tanpa memangkas, menyebabkan ruang kosong kelihatan di sekeliling imej.
• penutup: Memastikan imej meliputi keseluruhan kawasan penentududukan latar belakang, menyebabkan kemungkinan pemangkasan imej untuk dimuatkan.

Perbandingan Visual

Pertimbangkan imej di bawah dipaparkan dalam kotak sempadan. mengandungi memastikan imej kelihatan sepenuhnya dalam kotak, manakala penutup mengisi kotak dengan imej, mengakibatkan pemangkasan di bahagian bawah:

[Imej imej dengan tetapan saiz latar belakang kandungan dan penutup]

Demonstrasi Langsung

Kod berikut menunjukkan perbezaan antara kandungan dan penutup:

<div><div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully contained.</p>
</div>
<div><div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image covers all of the <code><div></code>.</p>
</div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Imej Latar Belakang CSS Sesuai dengan Lebar dan Auto-Skala Tinggi Secara Proporsional?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!