CSS Tricks : การจัดรูปภาพให้สวยงาม โดยไม่ใช้ image-background

ช่วงหลังๆ มานี้ ทำงาน Frontend บ่อยมาก โปรแกรมเมอร์กากๆ แบบผมก็จัดต้องหาวิธีแก้ไขปัญหากันไปครับ เมื่อก่อนนึกถึงปัญหาเกี่ยวกับรูปภาพที่แก้กันแบบง่ายๆ คือย่อภาพ หรือให้จัดภาพให้มีขนาดพอดีมาก่อนแล้วค่อยอัพโหลด

ช่วงหลังๆ เป็นอะไรที่ CSS บูมขึ้นเรื่อยๆ เมื่องานบางครั้งก็ต้องการให้แสดงภาพได้อย่างสวยงาม และที่สำคัญใช้งานง่ายๆ การที่เราจะมาบอกคนใช้งานว่าไปอัพรูปมาก่อนสิคงยาก

See the Pen Image Crop by ALTELMA (@ALTELMA) on CodePen.

ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

การเพิ่ม Font ภาษาไทยอื่นๆ เข้าไปใช้งานใน MPDF

เนื่องมาจากผมได้มีโอกาสจับงานที่ต้องแปลงหน้าเว็บให้เป็น PDF ลองๆ หาข้อมูลก็ไปเจอเจ้าตัวนี้ MPDF ซึ่งจริงๆ แล้วก็มีให้ใช้งานอีกหลายๆ ตัว สาเหตุที่เลือกใช้งานตัวนี้เพราะมัน ค่อนข้างจะติดตั้ง และใช้งานง่าย และยังสามารถอ้างอิง CSS เข้ามาช่วยจัดหน้าตาใน PDF ได้อีกด้วย ซึ่งผลที่ได้เพี้ยนไปจากตัวจริงไม่มากครับ แต่ที่ทำให้เลือกใช้งานเพราะการเพิ่มฟ้อนท์ภาษาไทย เข้าไปนั้นค่อนข้างง่ายครับ เลยจะขอมาแนะนำดังนี้

อ่านเพิ่มเติม

แก้ไขปัญหา Laravel+Vite redirect ไปที่ path build

ก่อนหน้านี้ติดปัญหาเรื่องการพัฒนาเว็บแอพลิเคชันด้วย Laravel และ Vuejs โดยใช้ Vite ควบคู่ในการพัฒนา Frontend ตอนรัน npm run dev ก็ดูเหมือนจะใช้งานได้ปกติ แต่พอมาลอง build ดูปรากฏว่าตัว application คอย redirect ไปที่ path /build ตลอดเลย พอหาข้อมูล ไปๆ มาๆ ก็เจอว่าตอนที่เขียนเราใช้ router ของฝั่ง vuejs ซึ่งทำเป็น SPA const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), }); จากโค๊ดด้านบนนี่แหละที่ มึนอยู่หลาย ชั่วโมง แก้ง่ายๆ ที่สุด คือทำแบบนี้ const router = createRouter({ history: createWebHistory(), }); เข้าใจว่า import.meta.env.BASE_URL ค่า default น่าจะเป็น /build ถ้าเอาออกจะช่วยแก้ไขปัญหาได้ แต่ยังไม่ได้ลองว่าถ้าเราไปกำหนด env ตัวนี้ขึ้นมาก็อาจจะช่วยแก้ไขปัญหาได้ด้วยหรือเปล่า? VITE_BASE_URL="/" ใครลองแล้วได้ผลมาคอมเม้นกันด้วยนะ วันนี้ไปก่อนละ

อ่านเพิ่มเติม

ปลดล็อคความสามารถให้กับ Sublime Text ตอนที่ 1

นานมาแล้วที่ผมเคยใช้ Dreamweaver ในการพัฒนาเว็บไซต์ตั้งแต่ CS 3 จนกระทั่งถึง CS 6 จนผมได้มาพบ Text Editor ที่ทรงพลังตัวหนึงเข้าและเกิดความประทับใจเป็นอย่างมาก จึงลองเปิดเปลี่ยนมาใช้มันดู ถ้าบอกตามความจริงแล้ว ผมเพียงแต่ใช้ตามเทรนน่ะครับ แบบเห็นคนเค้าใช้กันก็ลองใช้ดู แต่ที่ได้เห็นกับตาจริงๆ ก็คือ การโหลดโปรแกรมที่ไวในตอนเริ่ม ก่อนจะเกริ่นต่อไป ผมขอออกตัวนะครับ ว่าไม่ได้ไช่พวกคลั่ง Sublime Text หรือจะมาบอกว่าดีกว่าตัวอื่นๆ แค่จะมานำเสนอความสามารถที่ซ่อนอยู่ สำหรับเพื่อนๆ ที่ลองใช้แล้วไม่เข้าใจว่ามันดียังไง .. เพราะความจริงก่อนหน้านั้นผมก็ใช้ Editpus หรือแม้แต่ Eclipse มาบ้างซึ่งก็ใช้ตามสถานการณ์ไม่ได้เจาะจงว่าต้อง Sublime อย่างเดียว .. สำหรับคนที่ใช้ Dreamweaver ก็อย่ากังวลครับ ไม่ได้มาบอกว่าใครที่ใช้ไม่โปร อันนี้ไม่เกี่ยวนะครับ ออกตัวไว้ให้รับทราบกันก่อน

อ่านเพิ่มเติม

CodingRemember

ค้นหาบล็อกนี้