JavaScript ปรับขนาดรูปภาพแบบไดนามิก

ปัญหาที่พบบ่อยเมื่ออัปเดตบทความบนเว็บไซต์ของคุณเองคือภาพประกอบบทความกว้างเกินไป ส่งผลให้หน้าเว็บทั้งหมดบิดเบี้ยว มันจะยุ่งยากเกินไปที่จะปรับขนาดแต่ละภาพประกอบก่อนที่จะแทรก

ฉันพบสิ่งนี้ในบทความที่ฉันเขียนเมื่อไม่นานมานี้ ต่อมาฉันใช้คุณสมบัติโอเวอร์โฟลว์ CSS และความกว้างสูงสุดเพื่อแก้ไขปัญหาการเสียรูปของหน้าชั่วคราว ข้อดีของวิธีนี้คือ ง่าย แต่ข้อเสียคือจะทำลายเอฟเฟกต์ของรายละเอียดบางอย่าง

ตัวอย่างเช่น overflow:hidden หมายความว่าเมื่อความกว้างขององค์ประกอบภายในมากกว่าเฟรมหลัก ความกว้างส่วนเกินจะถูกซ่อนไว้ การทำเช่นนี้อาจทำให้เนื้อหาบางส่วนถูกตัดและซ่อนกะทันหันซึ่งน่าเสียดายสำหรับผู้ชม

หากคุณจำกัดความกว้างสูงสุดของภาพประกอบบทความโดยใช้แอตทริบิวต์ความกว้างสูงสุด คุณจะต้องพิจารณาความเข้ากันได้ของแต่ละเบราว์เซอร์ IE6 ไม่รองรับแอตทริบิวต์นี้ ในความรู้สึกของฉัน แม้ว่าเบราว์เซอร์บางตัวจะรองรับแอตทริบิวต์นี้ แต่รูปภาพก็ไม่ได้ปรับขนาดตามสัดส่วน (ดูเหมือนว่าจะเป็น Safari และ Opera ฉันจำไม่ได้ชัดเจน) หากทำเช่นนี้ มันจะเป็นอันตราย แก่ผู้ใช้เบราว์เซอร์เหล่านี้

ดังนั้นสิ่งที่ฉันเลือกในที่สุดคือเปลี่ยนขนาดรูปภาพแบบไดนามิกผ่าน JavaScript วิธีนี้มีความเข้ากันได้ดีกับเบราว์เซอร์ต่างๆ (ทุกวันนี้มีคนน้อยมากที่จะปิดการใช้งาน JavaScript ใช่ไหม) และหากธีมมีการเปลี่ยนแปลง ขนาดสูงสุดของภาพประกอบบทความก็สามารถเปลี่ยนได้อย่างยืดหยุ่นเช่นกัน

มีสองวิธีแก้ไข เนื่องจากธีมที่ฉันใช้โหลดมาพร้อมกับไลบรารี jQuery จึงสามารถใช้งานได้ด้วยโค้ดต่อไปนี้:

$ ( เอกสาร ) . พร้อม ( ฟังก์ชั่น ( ) {
 $ ( '.post img' ) แต่ละรายการ ( ฟังก์ชัน ( ) {
 var maxWidth = 100 ; // ความกว้างรูปภาพสูงสุด
 var maxHeight = 100 ; // ความสูงสูงสุดของรูปภาพ
 อัตราส่วน var = 0 ; // อัตราส่วนสเกล
 var width = $ ( this ) . width ( ) ; // ความกว้างที่แท้จริงของรูปภาพ
 var height = $ ( this ) . ความสูง ( ) ; // ความสูงที่แท้จริงของรูปภาพ

 // ตรวจสอบว่าภาพกว้างมากหรือไม่
 ถ้า ( ความกว้าง > maxWidth ) {
 ratio = maxWidth / width ; // คำนวณอัตราส่วนสเกล
 $ ( นี่ ) . css ( "width" , maxWidth ) ; // กำหนดความกว้างของการแสดงผลจริง
 height = height * ratio ; // คำนวณความสูงหลังจากปรับขนาดเท่ากัน
 $ ( นี่ ) . css ( "ความสูง" , ความสูง * อัตราส่วน ) ; // ตั้งค่าความสูงหลังการปรับขนาดตามสัดส่วน
 -

 // ตรวจสอบว่าภาพสูงมากหรือไม่
 ถ้า ( สูง > maxHeight ) {
 ratio = maxHeight / height ; // คำนวณอัตราส่วนสเกล
 $ ( นี่ ) . css ( "height" , maxHeight ) ; // ตั้งค่าความสูงการแสดงผลจริง
 width = width * ratio ; // คำนวณความสูงหลังจากปรับขนาดเท่ากัน
 $ ( นี่ ) . css ( "width" , width * ratio ) ; // ตั้งค่าความสูงหลังการปรับสัดส่วน
 -
 } ) ;
 } ) ;

หากคุณไม่ต้องการโหลดไลบรารี jQuery คุณสามารถใช้โค้ดต่อไปนี้:

 ฟังก์ชั่น ResizeImage ( รูปภาพ , ความกว้างสูงสุดของภาพประกอบ , ความสูงสูงสุดของภาพประกอบ )
 -
 ถ้า ( image.className == "ภาพย่อ" )
 -
 w = รูปภาพ.ความกว้าง ;
 h = รูปภาพ. ความสูง ;

 ถ้า ( w == 0 || ชม == 0 )
 -
 image.width = ความกว้างสูงสุด ;
 image.height = ความสูงสูงสุด ;
 -
 อย่างอื่น ถ้า ( w > h )
 -
 ถ้า ( w > ความกว้างสูงสุด ) image.width = ความกว้างสูงสุด ;
 -
 อื่น
 -
 ถ้า ( h > maxheight ) รูปภาพ height = maxheight ;
 -

 image.className = "ภาพขนาดย่อที่ปรับขนาด" ;
 -
 -

การใช้ JavaScript ล้วนๆ จะยุ่งยากกว่าเล็กน้อย เนื่องจากคุณต้องเพิ่ม class="Thumbnail" ลงในรูปภาพด้วยตนเอง แต่ผลลัพธ์สุดท้ายจะเหมือนเดิม

ข้อความต้นฉบับ: ปรับขนาดภาพแบบไดนามิก

ขอบคุณ โบโล สำหรับการสนับสนุนของคุณ