Bagaimanakah Saya Boleh Membuat Saiz Imej Secara Responsif dengan Hanya CSS?

Cara Membuat Saiz Imej Secara Dinamik Apabila Tetingkap Penyemak Imbas Berubah Menggunakan CSS

Meningkatkan responsif tapak web selalunya melibatkan pelarasan saiz imej berdasarkan dimensi penyemak imbas . Artikel ini membincangkan cara untuk mencapai fungsi ini semata-mata dengan CSS.

Melaksanakan Saiz Semula Imej Dinamik

Untuk membolehkan imej menyesuaikan diri dengan lebar dan ketinggian penyemak imbas, tambahkan CSS berikut sifat kepada elemen:

img {
    max-width: 100%;
    height: auto;
}

Dalam Internet Explorer 8, sifat tambahan diperlukan:

width: auto;

Memastikan Had Lebar Maks

Untuk mengehadkan lebar maksimum imej, bungkusnya dalam bekas dengan yang ditentukan lebar maks:

<div>
<p><strong>Mata Utama</strong></p>
<ul>
<li>Penyelesaian ini membolehkan imej berskala dengan lancar apabila dimensi tetingkap penyemak imbas berubah.</li>
<li> Ia berfungsi dalam semua penyemak imbas yang diuji: Chrome, Firefox dan IE.</li>
<li>Tiada JavaScript diperlukan untuknya pelaksanaan.</li>
</ul>
</div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Saiz Imej Secara Responsif dengan Hanya CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!