Bagaimana Menjadikan Imej Responsif dan Mengekalkan Latar Belakang Skrin Penuh dengan `saiz latar belakang: penutup`?

Saiz semula Imej secara Automatik dengan Saiz Penyemak Imbas Menggunakan CSS

Dalam soalan ini, matlamatnya adalah untuk mengubah saiz imej secara automatik apabila tetingkap penyemak imbas diubah saiz , sambil mengekalkan reka bentuk skrin penuh dengan saiz latar belakang: kesan penutup.

Untuk mencapai ini, cuma ubah suai kod CSS seperti berikut:

<code class="css">img {
    max-width: 100%;
    height: auto;
    width: auto; /* ie8 */
}</code>

Dengan menetapkan lebar maksimum kepada 100 % dan ketinggian kepada auto, imej akan berskala responsif kepada saiz tetingkap penyemak imbas. Lebar: auto9; peraturan adalah khusus untuk IE8 untuk memastikan tingkah laku yang konsisten merentas penyemak imbas.

Selain itu, imej latar belakang boleh diberikan saiz latar belakang: sifat penutup untuk mencipta kesan skrin penuh:

<code class="css">body {
    ...
    background-size: cover;
}</code>

Dengan ini pengubahsuaian, imej akan mengubah saiz secara automatik sambil mengekalkan kesan latar belakang yang ditentukan, memastikan reka bentuk responsif sepenuhnya.

Atas ialah kandungan terperinci Bagaimana Menjadikan Imej Responsif dan Mengekalkan Latar Belakang Skrin Penuh dengan `saiz latar belakang: penutup`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!