Imej responsif ialah imej yang boleh menyesuaikan dirinya dengan peranti yang berbeza, tanpa mengira saiz skrin. Mempunyai imej responsif di laman web telah menjadi sangat penting pada masa kini. Memandangkan ia bukan sahaja mempercepatkan laman web tetapi juga menawarkan pengalaman pengguna yang hebat di semua peranti. Imej responsif juga akan diubah saiz dengan mengubah saiz pelayar.
Imej responsif dengan cekap menyesuaikan diri dengan saiz skrin yang berbeza pada peranti yang berbeza. Ia memastikan kualiti terjaga. Tapak web responsif dengan imej responsif pasti meningkatkan penglibatan dan kadar penukaran. Imej boleh dibuat responsif menggunakan CSS bersama-sama dengan pertanyaan media.
Tulisan ini akan menggunakan HTML dan CSS untuk menjadikan imej responsif.
Bagaimana Membuat Imej Responsif dengan HTML dan CSS?
Untuk menjadikan imej responsif menggunakan HTML dan CSS, ikuti langkah di bawah:
Kaedah 1: Gunakan Harta 'lebar maksimum'.
Kaedah pertama untuk menjadikan imej responsif adalah dengan menggunakan ' lebar maksimum ” harta benda. ' lebar maksimum sifat ” digunakan untuk menentukan lebar maksimum imej. Sekiranya kandungan melebihi lebar maksimum, ia akan mengubah ketinggian elemen.
Cipta HTML
Untuk menambah fail imej dalam teg
HTML, pengguna perlu menggunakan tegTambah CSS
Sekarang, buat fail CSS luaran simpan dengan fail “. css ” sambungan fail, dan pautkannya di dalam teg
fail HTML. Untuk menggayakan fail imej dalam fail CSS, mulakan dengan teg img dan buka pendakap kerinting. Kemudian, di dalam pendakap kerinting, tambahkan “ lebar maksimum: 100% ;” untuk memuatkan imej secara mendatar dalam bekas. Selain itu, ia akan menghalang imej daripada dipotong. Selepas itu, tambah ' ketinggian: auto ;” untuk melaraskan ketinggian secara automatik, supaya imej dipaparkan dengan betul:img {
lebar maksimum : 100% ;
ketinggian : auto ;
}
Ubah saiz tetingkap penyemak imbas untuk menyemak cara imej berskala.
Kaedah 2: Gunakan Harta 'lebar'.
Kaedah lain untuk menjadikan imej responsif adalah dengan menggunakan sifat ' lebar ”. Harta ' lebar ” mentakrifkan lebar untuk imej dan teks. Ia tidak mengandungi jidar, pelapik atau sempadan. Ia boleh menetapkan saiz imej dan teks dalam bentuk cm, px atau %. Untuk menjadikan imej responsif, hanya tetapkan ' lebar ” harta kepada “ 100 %”. Tetapan ' lebar: 100% ;” bermakna menjadikan imej sebesar elemen induk:
img {lebar : 100% ;
ketinggian : auto ; }
Di atas mengesahkan bahawa imej itu responsif. Untuk menyemak sama ada ia responsif atau tidak, cuma ubah saiz tetingkap penyemak imbas.
Kaedah 3: Gunakan Pertanyaan Media
Pertanyaan media CSS membantu pengguna mengubah suai rupa halaman web. Pertanyaan media CSS mengandungi syarat, apabila syarat ini dipenuhi, ia akan mengubah rupa peranti atau penyemak imbas. Pertanyaan media juga boleh membantu pengguna dalam membuat imej responsif. Atas sebab itu, pertama, nyatakan “@ media teg ” dan kemudian nyatakan “ lebar maksimum ” dan tetapkan lebar maksimum untuk imej dalam pendakap. Apabila keadaan ini akan memenuhi imej akan mendapat responsif. Selepas itu, tambah pendakap kerinting tentukan tag img, dan tentukan “ lebar: 100% ;” nilai:
@media ( lebar maksimum : 480px ) {img {
lebar : 100% ;
}
}
Catatan : imej hanya akan responsif jika ia memenuhi syarat yang ditetapkan.
Pertanyaan media CSS telah digunakan, dan kini imej akan bertindak sebagai responsif jika ia diubah saiz kepada saiz imej yang ditentukan. Jika tidak, ia tidak akan responsif:
Kesimpulan
Untuk menjadikan imej responsif dengan HTML dan CSS, pengguna mempunyai pelbagai kaedah. Kaedah ini termasuk menjadikan imej responsif menggunakan ' lebar maksimum 'harta,' lebar ”, dan juga dengan menggunakan pertanyaan media CSS. Artikel ini telah memberikan pengguna penyelesaian lengkap untuk menjadikan imej responsif.