ภาพที่ตอบสนองคือภาพที่สามารถปรับตัวเองให้เข้ากับอุปกรณ์ต่างๆ ได้ ไม่ว่าหน้าจอจะมีขนาดเท่าใดก็ตาม การมีรูปภาพที่ตอบสนองบนเว็บไซต์ถือเป็นสิ่งสำคัญมากในทุกวันนี้ เนื่องจากไม่เพียงเพิ่มความเร็วเว็บไซต์ แต่ยังมอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยมในทุกอุปกรณ์ ภาพที่ตอบสนองจะได้รับการปรับขนาดด้วยการปรับขนาดเบราว์เซอร์
ภาพที่ตอบสนองจะปรับให้เข้ากับขนาดหน้าจอที่แตกต่างกันบนอุปกรณ์ต่างๆ ได้อย่างมีประสิทธิภาพ ช่วยให้มั่นใจได้ว่าจะรักษาคุณภาพไว้ เว็บไซต์แบบตอบสนองที่มีรูปภาพแบบตอบสนองจะช่วยเพิ่มอัตราการมีส่วนร่วมและการแปลงอย่างแน่นอน รูปภาพสามารถตอบสนองได้โดยใช้ CSS พร้อมกับคำสั่งสื่อ
บทความนี้จะใช้ HTML และ CSS เพื่อทำให้รูปภาพตอบสนอง
จะทำให้รูปภาพตอบสนองด้วย HTML และ CSS ได้อย่างไร
หากต้องการทำให้รูปภาพตอบสนองโดยใช้ HTML และ CSS ให้ทำตามขั้นตอนด้านล่าง:
วิธีที่ 1: ใช้คุณสมบัติ 'ความกว้างสูงสุด'
วิธีแรกในการทำให้รูปภาพตอบสนองคือการใช้ปุ่ม “ ความกว้างสูงสุด ' คุณสมบัติ. “ ความกว้างสูงสุด คุณสมบัติ ” ใช้เพื่อกำหนดความกว้างสูงสุดของรูปภาพ ในกรณีที่เนื้อหาเกินความกว้างสูงสุด ความสูงขององค์ประกอบจะเปลี่ยน
สร้าง HTML
หากต้องการเพิ่มไฟล์รูปภาพในแท็ก
ของ HTML ผู้ใช้จำเป็นต้องใช้แท็กเพิ่ม CSS
ตอนนี้ สร้างไฟล์ CSS ภายนอก บันทึกด้วยนามสกุล “. ซีเอสเอส ” และลิงก์ไว้ภายในแท็ก
ของไฟล์ HTML หากต้องการจัดสไตล์ไฟล์รูปภาพในไฟล์ CSS ให้เริ่มต้นด้วยแท็ก img แล้วเปิดเครื่องหมายปีกกา จากนั้นภายในวงเล็บปีกกา ให้เพิ่ม ' ความกว้างสูงสุด: 100% ;” เพื่อให้พอดีกับรูปภาพในแนวนอนภายในคอนเทนเนอร์ นอกจากนี้ยังจะป้องกันไม่ให้ภาพถูกตัด หลังจากนั้นให้เพิ่ม “ ความสูง: อัตโนมัติ ;” เพื่อปรับความสูงโดยอัตโนมัติ เพื่อให้ภาพแสดงได้อย่างถูกต้อง:รูปภาพ {
ความกว้างสูงสุด : : 100% ;
ความสูง : : อัตโนมัติ ;
}
ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อตรวจสอบขนาดรูปภาพ
วิธีที่ 2: ใช้คุณสมบัติ 'ความกว้าง'
อีกวิธีหนึ่งในการทำให้รูปภาพตอบสนองคือการใช้คุณสมบัติ “ ความกว้าง '. ทรัพย์สิน” ความกว้าง ” กำหนดความกว้างของรูปภาพและข้อความ ไม่มีระยะขอบ ช่องว่างภายใน หรือเส้นขอบ สามารถกำหนดขนาดรูปภาพและข้อความในรูปแบบ cm, px หรือ % หากต้องการทำให้รูปภาพตอบสนอง เพียงกำหนด ' ความกว้าง ” คุณสมบัติที่จะ “ 100 %” การตั้งค่า “ ความกว้าง: 100% ;” หมายความว่าทำให้รูปภาพใหญ่เท่ากับองค์ประกอบหลัก:
รูปภาพ {ความกว้าง : : 100% ;
ความสูง : : อัตโนมัติ ; }
ข้อมูลข้างต้นเป็นการยืนยันว่ารูปภาพมีการตอบสนอง หากต้องการตรวจสอบว่าตอบสนองหรือไม่ เพียงปรับขนาดหน้าต่างเบราว์เซอร์
วิธีที่ 3: ใช้แบบสอบถามสื่อ
ข้อความค้นหาสื่อ CSS ช่วยให้ผู้ใช้ปรับเปลี่ยนรูปลักษณ์ของหน้าเว็บได้ ข้อความค้นหาสื่อ CSS มีเงื่อนไข เมื่อใดก็ตามที่ตรงตามเงื่อนไขเหล่านี้ ลักษณะที่ปรากฏของอุปกรณ์หรือเบราว์เซอร์จะเปลี่ยน ข้อความค้นหาสื่อยังสามารถช่วยเหลือผู้ใช้ในการทำให้รูปภาพตอบสนองได้ ด้วยเหตุนี้ ขั้นแรกให้ระบุ '@ สื่อ ” แล้วระบุ “ ความกว้างสูงสุด ” และกำหนดความกว้างสูงสุดให้กับรูปภาพภายในเครื่องหมายปีกกา เมื่อใดก็ตามที่เป็นไปตามเงื่อนไขนี้ รูปภาพก็จะตอบสนอง หลังจากนั้นให้เพิ่มวงเล็บปีกการะบุแท็ก img และระบุ “ ความกว้าง: 100% ;” ค่า:
@สื่อ ( ความกว้างสูงสุด : : 480px ) {รูปภาพ {
ความกว้าง : : 100% ;
}
}
บันทึก : รูปภาพจะตอบสนองเมื่อตรงตามเงื่อนไขที่ระบุเท่านั้น
มีการใช้คิวรีสื่อ CSS แล้ว และตอนนี้รูปภาพจะทำงานตามการตอบสนองหากปรับขนาดเป็นขนาดรูปภาพที่ระบุ มิฉะนั้นจะไม่ตอบสนอง:
บทสรุป
เพื่อให้รูปภาพตอบสนองต่อ HTML และ CSS ผู้ใช้มีวิธีการต่างๆ วิธีการเหล่านี้รวมถึงการทำให้รูปภาพตอบสนองโดยใช้ “ ความกว้างสูงสุด ' คุณสมบัติ, ' ความกว้าง ” และโดยการใช้แบบสอบถามสื่อ CSS บทความนี้ได้นำเสนอโซลูชั่นที่สมบูรณ์แก่ผู้ใช้ในการทำให้รูปภาพตอบสนอง