ResponsifyJS ile Kolaylaştırılan Duyarlı Resimler

Modern web% 100 duyarlı olmalı ve daha yeni kütüphaneler bunu giderek daha fazla mümkün kılıyor.

Gibi ücretsiz eklentileri, ResponsifyJS, web sitelerinin tüm cihazlarda çalışmasını sağlamak daha da kolay. Bu ücretsiz jQuery eklentisi görüntülerin bir konteyner alır ve dinamik olarak onları yeniden düzenler değişken ekran boyutlarına göre.

Farklı kaplardan beri görüntüleri farklı tutun, çok garip şekillerde yeniden boyutlandırabilirler. Bazen, insanların fotoğraflarına sahip olabilirsiniz ve cep telefonlarında yeniden boyutlandırıldıklarında yüzleri kesilebilir.

Bu kesin sorunu çözmek için Responsify eklentisi oluşturuldu. Otomatik olarak çalışabilir ama gerçek sihir yatıyor kendi odak alanınızı tanımlama Resimde.

Kullanır ondalık açıklamaların iç sistemi Görüntünün odağının nerede olması gerektiğini bulmak için. Örneğin, pozisyonları tanımla gibi veri odak üstü hangi “bloklar” görüntünün belirli bir kesimi.

Bu verinin aktarılması gerekiyor ondalık şeklinde, örneğin, bir .5 ondalık, görüntünün% 50'sini (sol / sağ veya üst / alt) hedefler. Doğal olarak, bu kendi başına yapmak oldukça kafa karıştırıcı. Ancak, bir var ücretsiz Uygula cevapla bu sana izin veriyor pozisyonları dinamik olarak hesaplar tarayıcınızda.

Bir resim yükleyin, netleme alanını tanımlayın, sonra görüntü kodunu kopyalayıp web sitenize yapıştırın. Responsify eklentisi, görüntüyü daha küçük ekranlarda düzgün bir şekilde yeniden boyutlandırmak için gereken tüm verilere sahip olacak.

Epeyce bulabilirsiniz canlı demo linkleri GitHub deposunda, sitenize kopyalamak / yapıştırmak için kullanılan kod parçacıkları dahil.

Bu eklenti her proje için mükemmel bir çözüm değildir. Bazen istemek sabit odak alanı olmadan yeniden boyutlandırmak için görüntüler. Ancak, kullanıyorsanız jQuery ile duvar ızgaraları ResponsifyJS'i yığınıza eklemek zarar vermez.

Daha fazla bilgi edinmek için canlı bir demo, bir indirme bağlantısı ve eksiksiz bir kurulum kılavuzu için eklenti ana sayfasını ziyaret edin..