นักพัฒนากำหนดตำแหน่งของภาพเพื่อสร้างลำดับชั้นของภาพที่ชัดเจนโดยกำหนดลำดับและขนาดของภาพที่สัมพันธ์กับองค์ประกอบ HTML อื่นๆ ด้วยการวางภาพในตำแหน่งต่างๆ ที่ทันสมัย ไม่ซ้ำใคร และยังสามารถสร้างการออกแบบที่กำหนดเองซึ่งสามารถเปลี่ยนรูปลักษณ์ของเว็บไซต์ได้ บทความนี้สาธิตขั้นตอนการตั้งค่าตำแหน่งของรูปภาพโดยใช้ CSS
จะกำหนดตำแหน่งของรูปภาพใน CSS ได้อย่างไร?
การกำหนดตำแหน่งของรูปภาพใน CSS นั้นมีประโยชน์เช่น “ ตำแหน่งที่แม่นยำ ”, “ องค์ประกอบที่ทับซ้อนกัน ' และ ' การออกแบบที่ตอบสนอง ” ได้สำเร็จอย่างง่ายดาย นักพัฒนาสามารถปรับแต่งและสร้างเว็บไซต์ที่ใช้งานได้อย่างสมบูรณ์และสะดุดตาได้อย่างง่ายดาย มีสองวิธี/คุณสมบัติที่สามารถกำหนดตำแหน่งของรูปภาพได้ คุณสมบัติเหล่านี้อธิบายไว้ด้านล่าง:
วิธีที่ 1: การใช้คุณสมบัติลอยตัว
“ ลอย คุณสมบัติ ” มีให้โดย CSS สำหรับการเคลื่อนไหวขององค์ประกอบ HTML ใน “ ซ้าย ' หรือ ' ขวา ' ทิศทาง. ส่วนใหญ่จะใช้ในขณะที่สร้างเลย์เอาต์ที่ตอบสนองสำหรับการจัดวางองค์ประกอบ HTML ที่แม่นยำ
ตัวอย่างเช่น คุณสมบัติ “float” ใช้สำหรับจัดแนวรูปภาพทั้งด้านซ้ายและขวาของหน้าเว็บ:
< แผนก >
< img src = 'bg.jpg' ความสูง = '300px' ความกว้าง = '400px' ระดับ = 'ตำแหน่งขวา' >
< img src = 'book.jpg' ความสูง = '300px' ความกว้าง = '400px' ระดับ = 'ตำแหน่งซ้าย' >
แผนก >
ในรหัสด้านบน:
-
- ประการแรก ราก “ แผนก ” องค์ประกอบถูกสร้างขึ้นที่ทำงานเป็นคอนเทนเนอร์สำหรับองค์ประกอบ HTML
- ถัดไป สอง “
” แท็กถูกใช้ภายใน “
” แท็ก- หลังจากนั้น ค่าของ “ 300px ' และ ' 400px ” ให้กับ “ ความสูง ' และ ' ความกว้าง ” คุณลักษณะของทั้งสอง “
แท็ก
- นอกจากนี้ยังกำหนดคลาสของ “ ตำแหน่งขวา ' และ ' ตำแหน่งซ้าย ” ไปยังแท็ก “
” ที่หนึ่งและสองตามลำดับ
ตอนนี้ป้อน ' <สไตล์> แท็ก ” เพื่อใช้คุณสมบัติ CSS ต่อไปนี้:
< สไตล์ >
.positionRight {
ลอย: ขวา;
}
.positionซ้าย {
ลอย: ซ้าย;
}
สไตล์ >
คำอธิบายได้รับด้านล่าง:
-
- ขั้นแรก เลือก “ ตำแหน่งขวา ” class และตั้งค่าของ “ ขวา ” ถึงมัน “ ลอย ' คุณสมบัติ. สิ่งนี้จะย้ายองค์ประกอบ HTML ที่เลือกไปในทิศทางที่ถูกต้องบนหน้าเว็บ
- จากนั้นเลือก “ ตำแหน่งซ้าย ” class และให้ค่าของ “ ซ้าย ” ถึง “ ลอย ' คุณสมบัติ. สิ่งนี้จะย้ายองค์ประกอบให้เลื่อนไปทางด้านซ้าย
หลังจากสิ้นสุดขั้นตอนการรวบรวม:
ผลลัพธ์แสดงว่ารูปภาพถูกตั้งค่าไว้ที่ตำแหน่งซ้ายและขวาวิธีที่ 2: การใช้คุณสมบัติตำแหน่งวัตถุ
“ ตำแหน่งวัตถุ คุณสมบัติ ” ช่วยให้มั่นใจได้ว่าตำแหน่งของรูปภาพหรือองค์ประกอบ HTML ในตำแหน่งเฉพาะบนหน้าเว็บ ให้การควบคุมการวางตำแหน่งแนวนอนและแนวตั้ง ทำให้ผู้ใช้สามารถบรรลุเอฟเฟ็กต์ภาพหรือเลย์เอาต์ที่ต้องการได้ ส่วนใหญ่จะใช้โดยนักพัฒนาสำหรับการครอบตัดรูปภาพ สร้างภาพขนาดย่อ เค้าโครงที่กำหนดเอง ฯลฯ
คุณสมบัตินี้สามารถรับได้ทั้งค่าตัวเลขและค่าคีย์เวิร์ด ตัวอย่างเช่น มีการระบุทั้งค่าตัวเลขและคำหลักสำหรับ ' ตำแหน่งวัตถุ ' คุณสมบัติ. มันกำหนดตำแหน่งของรูปภาพใน CSS ในข้อมูลโค้ดด้านล่าง:
< สไตล์ >
.numericalValues
{
ตำแหน่งวัตถุ: 100px 20px;
}
.keywordValues
{
ตำแหน่งวัตถุ: ซ้าย;
}
สไตล์ >
< ร่างกาย >
< แผนก >
< img src = 'book.jpg' ความสูง = '300px' ความกว้าง = '400px' ระดับ = 'ค่าคำหลัก' >
< img src = 'bg.jpg' ความสูง = '300px' ความกว้าง = '400px' ระดับ = 'ค่าตัวเลข' >
แผนก >
ร่างกาย >
ในข้อมูลโค้ดด้านบน:-
- ประการแรก “ ค่าตัวเลข ” คลาสถูกเลือกภายใน “ <สไตล์> ” แท็ก และค่าตัวเลขของ “ 100px 20px ” มีให้กับ CSS “ ตำแหน่งวัตถุ ' คุณสมบัติ. “ 100px ” คือช่องว่างที่เพิ่มในแนวนอนและ “ 20px ” สำหรับแนวตั้ง
- ต่อไป “ ค่าคำหลัก ” คลาสถูกเลือกและค่าคีย์เวิร์ดของ “ ซ้าย ” ให้กับ “ ตำแหน่งวัตถุ คุณสมบัติ ” เพื่อจัดตำแหน่งภาพไปทางซ้าย
- หลังจากนั้นภายใน “ <เนื้อหา> ” แท็กภาพสองภาพจะถูกสร้างขึ้น และคลาสที่สร้างไว้ด้านบนจะถูกกำหนดให้กับภาพเหล่านั้น
หลังจากสิ้นสุดขั้นตอนการรวบรวม หน้าเว็บจะปรากฏดังนี้:
ภาพสแนปชอตแสดงให้เห็นว่าขณะนี้ภาพถูกตั้งค่าไปยังตำแหน่งเฉพาะบทสรุป
ตำแหน่งของรูปภาพสามารถกำหนดได้โดยใช้ CSS “ ลอย ' และ ' ตำแหน่งวัตถุ ' คุณสมบัติ. “ ลอย คุณสมบัติ ” รับคำหลักเป็นค่าและย้ายองค์ประกอบในตำแหน่งซ้ายหรือขวา ในทางกลับกัน “ ตำแหน่งวัตถุ ” รับทั้งคำหลักและค่าตัวเลขในทิศทางแนวนอนและแนวตั้ง บทความนี้ได้แสดงขั้นตอนการตั้งค่าตำแหน่งของรูปภาพใน CSS
- หลังจากนั้น ค่าของ “ 300px ' และ ' 400px ” ให้กับ “ ความสูง ' และ ' ความกว้าง ” คุณลักษณะของทั้งสอง “