Bagaimana Membuat Saiz Imej Secara Automatik dengan Perubahan Tetingkap Pelayar dalam CSS?

Saiz Imej secara Automatik dengan Saiz Penyemak Imbas Menggunakan CSS

Soalan: Saya mahu imej saya melaraskan saiznya secara automatik semasa saya mengubah saiz penyemak imbas saya tingkap. Walau bagaimanapun, kod di bawah tidak berfungsi:

HTML:

<code class="html"><img src="img/icon_contact.png" alt="" />
<img src="img/icon_links.png" alt="" /></code>

CSS:

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

Jawapan: Untuk mendayakan saiz semula imej dengan saiz semula penyemak imbas, tambah sifat berikut pada CSS anda:

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

Ini memastikan skala imej secara berkadar dan menyesuaikan secara automatik kepada ruang yang tersedia apabila tetingkap penyemak imbas diubah saiz .

Penjelasan Tambahan:

Gabungan lebar maks: 100% dan ketinggian: auto membolehkan imej berkembang kepada lebar maksimumnya tanpa melebihi lebar elemen induk manakala mengekalkan nisbah aspek mereka. Lebar: penggodaman auto9 secara khusus menyasarkan IE8, yang sebaliknya mengabaikan lebar maksimum apabila memaparkan imej.

Akibatnya, sebarang imej yang ditambahkan menggunakan teg akan menjadi "fleksibel", mengubah saiz secara responsif kepada perubahan saiz penyemak imbas.

Contoh:

Rujuk contoh JSFiddle berikut untuk demonstrasi yang berfungsi: [JSFiddle Link]

Kod ini tidak memerlukan JavaScript dan serasi dengan versi terkini Chrome, Firefox dan IE.

Atas ialah kandungan terperinci Bagaimana Membuat Saiz Imej Secara Automatik dengan Perubahan Tetingkap Pelayar dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!