วิธีสร้างรูปภาพที่ปรับเปลี่ยนได้ด้วย CSS Flexbox

. หลังจากนั้น อนุญาตให้รูปภาพตัดไปบรรทัดถัดไปเมื่อจำเป็นโดยการตั้งค่า “ ดิ้นห่อ ” มูลค่าทรัพย์สินถึง “ ห่อ '.

จากนั้นใช้ CSS กับรูปภาพโดยระบุ “ รูปภาพ ” พร้อมด้วย “ .images-คอนเทนเนอร์ ' ชื่อ. ขั้นแรก ให้ตั้งค่า “ ดิ้น ” มูลค่าทรัพย์สินถึง “ 1 ” เพื่อกระจายพื้นที่ว่างระหว่างรูปภาพให้เท่าๆ กัน จากนั้นให้ตั้งค่า “ ความกว้างสูงสุด ” มูลค่าทรัพย์สินถึง “ 100% ” เพื่อให้แน่ใจว่ารูปภาพจะไม่เกินความกว้างดั้งเดิม ตั้ง ' ความสูง ” มูลค่าทรัพย์สินถึง “ อัตโนมัติ ” เพื่อรักษาอัตราส่วนภาพ สุดท้าย เพิ่มระยะห่างระหว่างรูปภาพโดยการตั้งค่า “ ระยะขอบ ” มูลค่าทรัพย์สินถึง “ 10px ”:

.images-คอนเทนเนอร์ {
แสดง: ดิ้น ;
ดิ้นห่อ: ห่อ;
}

.images-คอนเทนเนอร์ img {
ดิ้น: 1 ;
ความกว้างสูงสุด: 100 % ;
ความสูง: อัตโนมัติ;
ระยะขอบ: 10px;
}

ก่อนห่อ

สร้างอิมเมจแบบปรับได้โดยใช้ CSS Flexbox สำเร็จแล้ว มุมมองผลลัพธ์ด้านล่างอยู่ก่อนปิดหน้าต่างเบราว์เซอร์:

หลังจากห่อ

ตอนนี้ เรามารวมหน้าต่างเบราว์เซอร์เพื่อตรวจสอบว่ารูปภาพนั้นปรับไม่ได้หรือไม่:

รูปภาพด้านบนยืนยันว่ารูปภาพที่เพิ่มนั้นมีการปรับเปลี่ยนได้

บทสรุป

ในการสร้างภาพที่ปรับเปลี่ยนได้ด้วย CSS Flexbox ผู้ใช้จะต้องสร้างโครงสร้าง HTML ก่อน จากนั้นจึงกำหนด