รูปภาพที่ตอบสนองได้ง่ายด้วย ResponsifyJS

เว็บที่ทันสมัยควรตอบสนองได้ 100% และห้องสมุดใหม่จะทำให้สิ่งนี้เป็นไปได้มากขึ้น.

ด้วยปลั๊กอินฟรีเช่น ResponsifyJS, มันง่ายยิ่งขึ้นที่จะทำให้เว็บไซต์ของคุณทำงานบนอุปกรณ์ทั้งหมด นี้ ปลั๊กอิน jQuery ฟรี ใช้ภาชนะของภาพและ จัดเรียงใหม่แบบไดนามิก ขึ้นอยู่กับขนาดหน้าจอที่แตกต่างกัน.

ตั้งแต่ภาชนะต่าง ๆ ถือภาพที่แตกต่าง, พวกเขาสามารถปรับขนาดในรูปแบบที่แปลกมาก บางครั้งคุณจะมีภาพถ่ายของผู้คนและใบหน้าของพวกเขาสามารถถูกตัดออกเมื่อปรับขนาดบนมือถือ.

ปลั๊กอิน Responsify ถูกสร้างขึ้นเพื่อแก้ไขปัญหานี้ มันสามารถทำงานได้โดยอัตโนมัติ แต่เวทมนตร์ที่แท้จริงตั้งอยู่ กำหนดพื้นที่โฟกัสของคุณเอง บนรูปภาพ.

มันใช้ ระบบภายในของคำอธิบายทศนิยม เพื่อค้นหาจุดโฟกัสของภาพ ตัวอย่างเช่นคุณสามารถ กำหนดตำแหน่ง เช่น ข้อมูลโฟกัสบน ที่ “บล็อกใน” ส่วนหนึ่งของภาพ.

ข้อมูลนี้จะต้องมีการส่งผ่าน ในรูปของทศนิยม, เช่น a .5 ทศนิยมเป้าหมาย 50% ของภาพ (ซ้าย / ขวาหรือบน / ล่าง) โดยธรรมชาติแล้วมันค่อนข้างสับสนที่จะทำด้วยตัวเอง แต่มี ฟรีแอพ Responsify ที่ช่วยให้คุณ คำนวณตำแหน่งแบบไดนามิก ในเบราว์เซอร์ของคุณ.

เพียงอัปโหลดรูปภาพกำหนดพื้นที่โฟกัสจากนั้นคัดลอก / วางรหัสรูปภาพในเว็บไซต์ของคุณ ปลั๊กอินความรับผิดชอบจะมีข้อมูลทั้งหมดที่จำเป็นในการปรับขนาดภาพบนหน้าจอขนาดเล็ก.

คุณสามารถหาได้ไม่กี่ ลิงก์สาธิตสด ใน repo GitHub รวมถึงข้อมูลโค้ดเพื่อคัดลอก / วางในเว็บไซต์ของคุณ.

ปลั๊กอินนี้ไม่ใช่โซลูชันที่สมบูรณ์แบบสำหรับทุกโครงการ บางครั้งคุณจะ ต้องการ รูปภาพที่จะปรับขนาดโดยไม่มีพื้นที่โฟกัสคงที่ แต่ถ้าคุณกำลังใช้ กริดก่ออิฐที่มี jQuery ไม่เจ็บที่จะเพิ่ม ResponsifyJS ในสแต็กของคุณ.

หากต้องการเรียนรู้เพิ่มเติมโปรดไปที่หน้าแรกของปลั๊กอินเพื่อดูตัวอย่างสดลิงค์ดาวน์โหลดและคู่มือการตั้งค่าแบบเต็ม.