ภาพในกระทู้ไม่ล้นขอบอีกต่อไปด้วย max-width :D

จาก kblog เดิมบน mmm ครับ

ผมเพิ่งเอาวิธีบังคับขนาดภาพผ่าน CSS มาใช้กับ mmm ครับ จากสิ่งที่ได้เรียนรู้มาจากอีกเวปนึง =)

เริ่มจากเมื่อหลายวันก่อนเพิ่งดีใจที่ค้นพบวิธีการใช้ CSS ย่อรูปให้เป็นไปตามขนาดที่ต้องการได้ แต่วิธีนั้นดันเป็นสิ่งที่ไม่ควรทำหรือนำมาใช้เป็นหลักในการย่อภาพบนเวป (ตาม Yahoo! Research) เพราะว่า หน้าเวปถึงจะแสดงภาพที่ถูกย่อตามที่เรากำหนดไว้ แต่ก่อนหน้านั้นภาพจะถูกโหลดมาที่ขนาดเต็ม ทำให้เสียเวลาในการโหลดหน้าเวปแบบเกินจำเป็น...

ผมทำแบบนี้กับภาพประกอบทุกอันกับภาพบน teaser บนเวป ไข่ผู้ดี.คอม ในตอนแรก โหลดกันเมื่อยไปเลย ฮ่า ๆ ๆ

ตอนหลังเลยต้องเปลี่ยนไปใช้ Imagefield + ImageCache + CCK + View แทนเพื่อเลี่ยงปัญหาตรงนี้ - -a

แต่จากวิธีข้างต้น ทำให้ผมนำมาใช้กับภาพประกอบบางส่วนใน mmm ที่ user โพสเข้ามาในระบบแล้วมีขนาดกว้างกว่าที่ผมบอกเอาไว้ ซึ่งส่วนที่เกินมาของภาพ มักจะไปตีกับเนื้อหาส่วน How-to : Tags ที่อยู่ทางขวา ทำให้ดูไม่งาม

ปรกติภาพที่ถูก upload เข้า mmm โดยตรงผมตั้งความกว้าง X สูงเอาไว้แล้ว (มีบางภาพที่ขนาดเกินมา แต่ก็ถูก upload เข้ามาได้เหมือนกัน .. ผมเลยไม่แน่ใจว่าต้องไปกำหนดตรงไหนกันแน่) แต่ภาพที่ถูก link มาจากที่อื่น มักจะมีขนาดเกินจากที่กำหนดโดยส่วนใหญ่

ผมแก้ปัญหานี้โดย การใช้ CSS บังคับย่อภาพเอาครับ ด้วย property อันนี้

.content img {max-width : 550px}

max-width : จะเป็น property เอาไว้กำหนดความกว้างที่สุดที่เราอนุญาตให้ object หนึ่ง ๆ แสดงผลได้บน theme ของเรา ในที่นี้ผมกำหนดกว้างสุดเอาไว้ที่ 550px ภาพที่ถูกส่งเข้ามาแล้วเล็กกว่า จะไม่มีผลอะไร แต่ถ้าภาพมีขนาดใหญ่กว่า 550px ภาพนั้นจะถูกย่อลงมาให้เหลือขนาดกว้างที่ 550px โดยที่ aspect ratio ยังคงเดิมครับ

เป็นการค้นพบทางสว่างด้วยความบังเอิญโดยแท้ =)