Bagaimana Membuat Saiz Imej Secara Automatik dengan Saiz Pelayar Menggunakan CSS?

Saiz semula Imej secara automatik dengan Saiz Penyemak Imbas Menggunakan CSS

Anda mahu imej anda diubah saiz secara automatik apabila anda mengubah saiz tetingkap penyemak imbas anda, tetapi kod yang disediakan tidak berfungsi. Mari kita siasat penyelesaian.

Untuk menjadikan imej fleksibel, anda perlu menambah lebar maksimum: 100% dan ketinggian: automatik pada imej tersebut. Walau bagaimanapun, IE8 mempunyai pepijat di mana ini tidak berfungsi. Untuk membetulkannya, tambahkan lebar: auto\9 untuk IE8.

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

Sebarang imej yang ditambahkan menggunakan teg img kini akan diubah saiznya secara automatik.

Untuk menggambarkan, berikut ialah contoh JSFiddle yang ' t memerlukan JavaScript. Ia serasi dengan versi terkini Chrome, Firefox dan IE (berdasarkan ujian).

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