Untuk menjadikan imej yang dipaparkan secara adaptif pada peranti yang berbeza, gaya responsif perlu ditetapkan. Kaedah teras adalah menggunakan maksimum lebar dan ketinggian: auto. 1. Set img {max-width: 100%; ketinggian: auto; } Biarkan imej secara automatik skala dan mengekalkan perkadaran mengikut lebar bekas induk; 2. Ketinggian: Auto Pastikan ketinggian diselaraskan secara proporsional untuk mengelakkan ubah bentuk; 3. Bekas induk harus menggunakan peratusan, max-width, atau unit VW untuk memadankan tindak balas imej; 4. Alternatif JavaScript boleh didapati untuk warisan IE, tetapi projek -projek moden umumnya tidak perlu dipertimbangkan.

Apabila imej digunakan dalam laman web, untuk menjadikannya muncul secara adaptif pada peranti yang berbeza, biasanya perlu untuk menetapkan gaya responsif. Menggunakan max-width adalah kaedah yang mudah dan berkesan.

1. Menetapkan max-width: 100% adalah kunci

Untuk membuat imej secara automatik tanpa melimpah, perkara yang paling biasa adalah untuk menambah imej:

 img {
  Max-Width: 100%;
  ketinggian: auto;
}

Kelebihan ini ialah imej secara automatik akan mengubah saiz berdasarkan lebar bekas induk sambil mengekalkan nisbah aspek asal. Sebagai contoh, jika anda mempunyai bekas dengan lebar maksimum 800px, letakkan gambar 1000px lebar. Pada skrin telefon bimbit, bekas ini mungkin hanya 375px, dan gambar itu secara automatik akan mengecut ke lebar maksimum yang sesuai untuk bekas dan tidak akan memecahkan susun atur.

2. Bekerjasama dengan height: auto mengekalkan perkadaran

Ramai orang hanya menulis max-width: 100% , tetapi jika height: auto tidak ditambah, imej mungkin berubah atau ketinggian tetap tidak berubah dengan lebar. Menetapkan height: auto memastikan bahawa ketinggian imej diperkuat ke skala.

Sebagai contoh: Imej 4: 3 menjadi lebih kecil lebar. Jika height ditetapkan kepada nilai tertentu, imej akan diratakan atau dipanjangkan. Selepas menetapkannya ke auto , penyemak imbas secara automatik akan mengira ketinggian yang sesuai dan mengekalkan perkadaran tidak berubah.

3. Perhatikan batasan bekas induk

Walaupun imej ditetapkan dengan max-width: 100% , imej mungkin tidak bertindak balas dengan betul jika elemen induk tidak mempunyai kawalan lebar yang sesuai. Contohnya:

• Jika elemen induk menggunakan lebar tetap (seperti width: 600px ), imej juga akan terhad kepada lebar ini.
• Jika elemen induk adalah width: 100vw , imej boleh mengisi keseluruhan viewport, melebihi kawasan kandungan.

Jadi cadangan:

• Pastikan bekas induk mempunyai tetapan lebar yang munasabah juga.
• Gunakan peratusan, unit max-width atau vw untuk menentukan saiz kontena untuk mengelakkan nilai tetap tegar.

4. Serasi dengan versi lama IE. Berhati -hati

Jika anda juga perlu menyokong IE8 atau lebih awal, sedar bahawa max-width mungkin tidak berkuatkuasa dalam penyemak imbas ini. Penyelesaian termasuk:

• Gunakan JavaScript untuk mengawal lebar imej secara dinamik.
• Cuba membimbing pengguna untuk menaik taraf atau gunakan pelayar moden.

Walau bagaimanapun, kebanyakan projek sekarang tidak perlu bersesuaian dengan penyemak imbas lama, dan ini boleh digunakan sebagai pengetahuan tambahan untuk difahami.

Pada dasarnya itu sahaja. max-width: 100% dipasangkan dengan height: auto adalah cara paling ringan untuk melaksanakan imej responsif. Kuncinya adalah untuk memahami bahawa ia bergantung kepada tetapan bekas induk dan tidak boleh berfungsi sendiri.

Atas ialah kandungan terperinci Membuat gambar responsif dengan CSS maksimum lebar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!