Beranda » Toolkit » Gambar Responsif Menjadi Mudah dengan ResponsifyJS

    Gambar Responsif Menjadi Mudah dengan ResponsifyJS

    Web modern harus 100% responsif dan perpustakaan yang lebih baru membuat ini semakin mungkin.

    Dengan plugin gratis, seperti TanggapanJS, bahkan lebih mudah untuk membuat situs web Anda berfungsi di semua perangkat. Ini plugin jQuery gratis mengambil wadah gambar dan secara dinamis mengatur ulang mereka berdasarkan berbagai ukuran layar.

    Karena wadah berbeda memegang gambar secara berbeda, mereka dapat mengubah ukuran dengan cara yang sangat aneh. Terkadang, Anda akan memiliki foto orang dan wajah mereka bisa terpotong ketika diubah ukurannya di ponsel.

    Plugin Responsify dibuat untuk menyelesaikan masalah yang sebenarnya ini. Itu dapat bekerja secara otomatis tetapi sihir yang sebenarnya terletak di mendefinisikan area fokus Anda sendiri di gambar.

    Ini menggunakan sistem internal deskripsi desimal untuk menemukan di mana fokus gambar seharusnya. Misalnya, Anda bisa tentukan posisi seperti data-fokus-atas yang “blok masuk” segmen gambar tertentu.

    Data ini harus diteruskan dalam bentuk desimal, misalnya, 0,5 desimal menargetkan 50% gambar (kiri / kanan atau atas / bawah). Tentu, ini cukup membingungkan untuk dilakukan sendiri. Tapi ada aplikasi Responsif gratis itu memungkinkan Anda menghitung posisi secara dinamis di browser Anda.

    Cukup unggah gambar, tentukan area fokus, lalu salin / tempel kode gambar ke situs web Anda. Plugin Responsify akan memiliki semua data yang diperlukan untuk mengubah ukuran gambar dengan benar pada layar yang lebih kecil.

    Anda dapat menemukan beberapa tautan demo langsung dalam repo GitHub, termasuk cuplikan kode untuk menyalin / menempel ke situs Anda.

    Plugin ini bukan solusi sempurna untuk setiap proyek. Terkadang, kamu akan ingin gambar untuk mengubah ukuran tanpa area fokus tetap. Tetapi, jika Anda menggunakan grid batu dengan jQuery tidak ada ruginya menambahkan ResponsifyJS ke tumpukan Anda.

    Untuk mempelajari lebih lanjut, kunjungi beranda plugin untuk demo langsung, tautan unduhan, dan panduan pengaturan lengkap.