การกำหนดความสูงของ element ให้เป็น %

กรณีที่อยากให้กำหนดความสูงของรูปให้เป็น % เหมาะสำหรับผู้ที่ทำเว็บแนว responsive มีเทคนิคดังนี้

1.  ครอบ element ที่อยากกำหนดความสูงเป็น % ด้วย div.container
2. ใส่ css ให้ div.container กำหนดความกว้างเป็น % แล้วกำหนดความสูงใส่ใน padding-bottom แทน
3. element เป้าหมาย ใส่ css ให้โดยกำหนด position เป็น absolute แล้วกำหนด top,right,bottom,left เป็น 0 ให้หมด

See the Pen EqdaH by pongsawat pasom (@fogza) on CodePen

ส่วนมากจะใช้กับกรณีที่อยากให้รูปเท่ากันทุกอันเวลาเรียงแนวนอน
หากยังไม่เก็ทอธิบายอีกรอบ :)

element ที่เป็น parent หากกำหนดความสูงเป็น % จะทำให้ความสูงของ element ที่เป็น child กลายเป็น 0 ทันที เพราะ element child ต้องการขนาดความสูงของ parent ที่แน่นอน

เปรียบเทียบง่ายๆ ก็คือ กำหนด padding-bottom:50% เพื่อให้ดัน element ขึ้นมา แล้วซ่อนส่วนที่เหลือด้วย overflow:hidden นั้นเอง

อ้างอิงค์จากคุณ Earthchie Thanarat