Çarşamba 22 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. ResponsifyJS ile Responsive Görüntüler
 ResponsifyJS ile Responsive Görüntüler
Arayüz JavaScript

ResponsifyJS ile Responsive Görüntüler

Yazar : Bilal UÇAR 23 Haziran 2017 0 Comment

Modern webde yapılan tasarımlar her türlü cihaza uygun olmalı. Yeni kütüphaneler işte tam da bu konuda bizlere yardımcı oluyor.

ResponsifyJS gibi ücretsiz eklentilerle, web sitelerinin tüm cihazlarda çalışmasını sağlamak daha da kolay. Bu ücretsiz jQuery eklentisi, bir konteyner görüntüsü alır ve çeşitli ekran boyutlarına dayanılarak dinamik olarak yeniden düzenler.

Farklı kaplar görüntüleri farklı tuttuğundan, çok garip şekillerde yeniden boyutlandırılabilirler. Bazen, insanların fotoğraflarına sahip olacaksınız ve ceplerinde yeniden boyutlandırıldığında yüzleri kesti.

Bu sorunu çözmek için Responsify eklentisi geliştirildi. Bu eklenti otomatik olarak çalışabilir, ancak yapmanız gereken bir şey var; resmin odak noktasını tanımlamak.

Görüntünün odağının nerede olması gerektiğini bulmak için ondalık açıklamalar iç sistemi kullanır. Örneğin, görüntünün belirli bir bölümünde “blok oluşturan” veri-odak-üst gibi konumları tanımlayabilirsiniz.

Bu verilerin ondalık sayıları ile aktarılması gerekir; örneğin .5 ondalık, görüntünün% 50’sini (sol / sağ veya üst / alt) hedefler. Doğal olarak, bu kendiniz yapmak oldukça kafa karıştırıcıdır. Ancak, tarayıcıda konumları dinamik olarak hesaplamanıza izin veren ücretsiz bir Responsify uygulaması var.

Sadece bir resim yükleyin, odak alanını tanımlayın, ardından görüntü kodunu web sitenize kopyalayın / yapıştırın. Responsify eklentisi, resmin küçük ekranlarda düzgün şekilde yeniden boyutlandırılması için gereken tüm verilere sahip olacak.

Sitenize kopyalamak / yapıştırmak için kod parçacıkları da dahil olmak üzere, GitHub repo‘sunda epey canlı bir demo bağlantısı bulabilirsiniz.

Bu eklenti, her proje için mükemmel bir çözüm değildir. Bazen, sabit odaklanma alanları olmaksızın görüntülerin yeniden boyutlandırılmasını isteyeceksiniz. Ancak jQuery ile duvar ızgaraları kullanıyorsanız, yığınınıza ResponsifyJS eklemeyi incitmez.

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

Resimlerinizi responsive hale getirmek için kullanabileceğiniz ResponsifyJS adlı ücretsiz jQuery eklentisinden bahsettik. Bu konu hakkındaki düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.

Etiketler: resimleri responsive göstermek responsifyjs responsive nasıl yapılır responsive resimler için responsifyjs
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.