Imej responsif dibuat mudah dengan responsifJS

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

Dengan plugin percuma, seperti ResponsifJS, lebih mudah untuk mendapatkan tapak web anda bekerja pada semua peranti. Ini plugin jQuery percuma mengambil bekas imej dan secara dinamik menyusun semula mereka berdasarkan saiz skrin yang berbeza-beza.

Sejak bekas yang berlainan memegang imej secara berbeza, mereka boleh mengubah saiz dengan cara yang sangat pelik. Kadang-kadang, anda akan mempunyai foto orang dan muka mereka boleh dipotong apabila diubah saiznya pada telefon bimbit.

Plugin Responsif telah dibuat untuk menyelesaikan masalah ini. Ia boleh berfungsi secara automatik tetapi sihir sebenar terletak menentukan kawasan tumpuan anda sendiri pada gambar.

Ia menggunakan sistem dalaman deskripsi perpuluhan untuk mencari di mana fokus imej harus. Sebagai contoh, anda boleh mentakrifkan kedudukan seperti data-fokus-atas yang mana “blok dalam” segmen imej tertentu.

Data ini perlu diluluskan dalam bentuk perpuluhan, contohnya .5 sasaran perpuluhan 50% imej (kiri / kanan atau atas / bawah). Sememangnya, ini agak mengelirukan untuk dilakukan sendiri. Tetapi, ada a percuma Response app yang membolehkan anda mengira kedudukan secara dinamik dalam penyemak imbas anda.

Hanya muat naik gambar, tentukan kawasan tumpuan, kemudian salin / tampal kod imej ke laman web anda. Plugin Responsify akan mempunyai semua data yang diperlukan untuk mengubah saiz imej pada skrin yang lebih kecil.

Anda boleh menemui beberapa orang pautan demo hidup dalam repo GitHub, termasuk coretan kod untuk menyalin / paste ke tapak anda.

Plugin ini bukan penyelesaian yang sempurna untuk setiap projek. Kadang-kadang, anda akan mahu imej untuk mengubah saiz tanpa fokus kawasan tumpuan. Tetapi, jika anda menggunakannya gred batu dengan jQuery ia tidak menyakitkan untuk menambah ResponsifyJS ke timbunan anda.

Untuk mengetahui lebih lanjut, lawati halaman utama plugin untuk demo langsung, pautan muat turun, dan panduan persediaan penuh.