Bagaimanakah Saya Boleh Mencapai Saiz Semula Imej Dinamik dalam CSS Merentasi Pelayar Berbeza?

Saiz Semula Imej Dinamik dengan CSS

Apabila berurusan dengan imej pada halaman web, selalunya wajar untuk mengubah saiznya dengan lancar apabila tetingkap penyemak imbas berubah saiz. Ini memastikan pengalaman tapak web yang konsisten dan responsif. Semasa menggunakan JavaScript menawarkan fleksibiliti, terdapat pendekatan berasaskan CSS yang berkesan untuk mencapai saiz semula imej dinamik.

Masalahnya:

Coretan kod yang disediakan menunjukkan pelaksanaan CSS untuk imej mengubah saiz, tetapi menghadapi masalah dalam pelbagai penyemak imbas, termasuk Chrome dan Safari. Imej tidak sentiasa mengubah saiz dengan betul atau mungkin dimuatkan dengan dimensi minimumnya.

Penyelesaian:

Dengan CSS tulen, saiz semula imej boleh dicapai menggunakan perkara berikut sifat:

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

Menetapkan lebar maksimum kepada 100% memastikan imej mengekalkan nisbah bidangnya sementara melaraskan lebarnya agar muat di dalam bekas. Ketinggian: auto membenarkan ketinggian berskala secara berkadar.

Untuk Keserasian IE8:

Untuk menangani pepijat IE8 di mana saiz semula imej tidak berfungsi dengan lebar maksimum: 100 %, tambahkan sifat CSS tambahan berikut:

width: auto;

Maks Tersuai Lebar:

Jika anda perlu mengehadkan lebar maksimum imej, gunakan bekas di sekelilingnya, tetapkan lebar maksimumnya seperti yang dikehendaki:

<div>

Contoh:

Pendekatan ini memastikan saiz semula imej dinamik dalam semua penyemak imbas utama tanpa memerlukan JavaScript. Contoh JSFiddle yang menunjukkan keberkesanannya tersedia di sini.

Untuk mengendalikan senario yang lebih kompleks, JavaScript boleh digunakan untuk memberikan fleksibiliti tambahan. Walau bagaimanapun, pelaksanaan CSS yang diterangkan di atas ialah pilihan yang mudah dan boleh dipercayai untuk mengubah saiz imej secara dinamik apabila tetingkap penyemak imbas berubah saiz.

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