ปรับขนาดรูปอัตโนมัติ ตามขนาดของ container ด้วย JQuery เขียนเมื่อ 2011.10.03 โดย

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

เนื่องจาก SMF ที่ได้รับงานให้แก้ไขได้ใช้ JQuery อยู่แล้ว วันนี้จึงอ้างอิง JQuery Library แทน
ก่อนอื่นเราหาขนาดความกว้างของ container ใน SMF ใช้ DIV Elelment โดยมี Class ชื่อ inner
max_w = Math.ceil($("div.inner").width());

จากนั้นก็สั่งให้ image ทั้งหมดที่ใหญ่กว่าขนาดของ container ให้มีขนาดเท่า container ซะ
$("div.inner img.bbc_img").each(function(){
if($(this).width()>max_w){
$(this).css("max-width", max_w+"px").css("height", "auto");
}
});

การ resize ในที่นี้ทำโดยบังคับด้วยคุณสมบัติใน CSS ชื่อ max-width ให้เท่ากับขนาดความกว้างของ container ส่วนความสูงเราก็สั่งให้เป็น auto เพื่อให้รูปที่ได้ไม่สูญเสียอัตราส่วนเดิม



คำเตือนคำเตือน เนื้อหาต่างๆ ในบทความ รวมถึงรูปภาพทั้งหมดในบทความนี้ เป็นความเห็นส่วนตัวของผู้เขียนแต่ละคน ซึ่งแต่ละคนได้ทำการลงทะเบียน และเขียนบทความลงใน Modoeye Articles นี้โดยไม่มีค่าธรรมเนียมใดๆ บทความเหล่านี้เป้าหมายเพื่อการศึกษา และความบันเทิงเท่านั้น การนำส่วนหนึ่งส่วนใดของบทความไปใช้งาน ควรทำการอ้างอิงถึงผู้เขียนและแหล่งที่มาด้วย