Home » » แสดงภาพเป็นวงกลมในบล็อกและเว็บไซต์ border-radius

แสดงภาพเป็นวงกลมในบล็อกและเว็บไซต์ border-radius

วิธีทำให้รูปภาพเป็นวงกลม โดยอัตโนมัติ สำหรับบล็อกและเว็บไซต์
เหมาะสำหรับบล็อกเกอร์ หรือเว็บไซต์ ที่ต้องการแสดงภาพที่สวยและแตกต่าง
((คลิกดูตัวอย่างบล็อก))



โค้ดแสดงภาพให้เป็นวงกลม ตัดขอบให้เป็นวงกลม ครอปเป็นวงกลม

โค้ด
.post img{max-width:auto;width:100%;-ms-interpolation-mode:bicubic;border:0;border-radius:50%;}

วิธีวางโค้ด
>>คัดลอกโค้ดสีแดงข้างต้น
>>แก้ไข HTML
>>ค้นหา ]]< /b skin>
>>วางโค้ดสีแดงลงก่อนหน้า ]]< /b skin>
>>บันทึกแทมเพลต (เสร็จ)

คำแนะนำเพิ่มเติม
*สามารถโหลดภาพได้ปกติ ภาพที่แสดงจะเป็นวงกลมโดยอัตโนมัติ
*ควรเป็นภาพสี่เหลี่ยมจตุรัส (ถ้าหากเป็นสี่เหลี่ยมผืนผ้า ภาพจะเป็นวงรี)
*หรือถ้าหากภาพเป็นสี่เหลี่ยมผืนผ้า ให้แก้ไขที่ Url ของภาพ โดยเพิ่ม -c ดังตัวอย่าง และผลที่แสดงจะเป็นสี่เหลี่ยมจตุรัส

เดิม
https://1.bp.blogspot.com/-_Ok1_P-FilA/VxHH5QM4bfI/AAAAAAAASbc/VaO4KBweRVYHEmTyEzoAPV6Cs7rKoMwjACLcB/s1600/flower-CIMG6170-500.JPG

เพิ่ม -c
https://1.bp.blogspot.com/-_Ok1_P-FilA/VxHH5QM4bfI/AAAAAAAASbc/VaO4KBweRVYHEmTyEzoAPV6Cs7rKoMwjACLcB/s1600-c/flower-CIMG6170-500.JPG
ภาพที่ได้
ตัวอย่างบล็อก>> http://thai-oldsong.blogspot.com

0 ความคิดเห็น:

แสดงความคิดเห็น

วันนี้