Bagaimanakah Saya Boleh Mencapai Saiz Semula Imej Dinamik dengan CSS Tulen?

Saiz Semula Imej Dinamik dengan CSS

Reka bentuk responsif selalunya memerlukan imej untuk melaraskan saiznya secara dinamik apabila port pandangan penyemak imbas berubah. Walaupun kod yang disediakan kelihatan menjanjikan, ia menghadapi masalah dalam penyemak imbas tertentu, terutamanya dalam Chrome dan Safari.

Untuk mengatasi isu ini, penyelesaian CSS tulen boleh dilakukan tanpa memerlukan JavaScript. Begini cara anda boleh mencapai saiz semula imej dinamik:

Pertama sekali, pastikan imej diberi lebar maksimum 100%. Ini membolehkan mereka mengecilkan saiz apabila tetingkap penyemak imbas mengecut, tanpa melebihi lebar asalnya. Selain itu, tetapkan ketinggian kepada auto untuk membolehkan imej menyesuaikan diri dengan ketinggian kandungannya.

Untuk keserasian IE8, sertakan lebar sifat: auto9. Ini memastikan bahawa imej dengan nisbah bidang yang lebih sempit tidak diregangkan terlalu lebar dalam IE8.

Jika anda inginkan lebar maksimum tetap untuk imej, letakkannya dalam bekas dan nyatakan lebar maksimumnya. Contohnya:

<div>

Secara keseluruhannya, menggunakan lebar maksimum:100%, tinggi:auto dan lebar: auto9 (untuk IE8) menawarkan penyelesaian kalis peluru untuk saiz semula imej dinamik dengan CSS. Kaedah ini berfungsi dengan lancar dalam Chrome, Firefox dan IE.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Saiz Semula Imej Dinamik dengan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!