การกำหนดความสูงของรูปภาพ (height) ใน CSS

บทนำ

คุณสมบัติ height ใน CSS ใช้สำหรับกำหนด **ความสูง** ของรูปภาพ (<img>) หรือองค์ประกอบบล็อกอื่นๆ

ค่าที่รองรับ

• ความยาวคงที่: px, em, rem, vh ฯลฯ
• เปอร์เซ็นต์ (%): คำนวณจาก **ความสูงของบล็อกบรรจุ (Containing Block)**
• auto - ความสูงอัตโนมัติตามอัตราส่วนเดิม (Default)

ตัวอย่าง

<html>
    <head>
    </head>
    <body>
        <img style="border: 2px solid green; height: 100px;" src="/css/images/logo.png" />
        <br />
        <img style="border: 2px solid green; height: 50%;" src="/css/images/logo.png" />
    </body>
</html>

คำอธิบาย

• รูปแรก: ความสูงคงที่ 100px กว้างจะปรับอัตโนมัติตามสัดส่วน (ถ้าไม่ตั้ง width)
• รูปที่สอง: ความสูง 50% ของ Container ที่บรรจุ

แนวทางปฏิบัติที่ดี:

• ตั้งค่า เพียงอย่างเดียว ระหว่าง width หรือ height อีกด้านจะปรับอัตโนมัติรักษาสัดส่วน
• หลีกเลี่ยงการตั้ง width และ height พร้อมกัน ยกเว้นต้องการบิดเบือนรูปภาพ
• ใช้ max-width: 100%; height: auto; สำหรับ Responsive Images

เคล็ดลับเพิ่มเติม

สำหรับ Responsive Design ควรใช้:

img {
    max-width: 100%;
    height: auto;
    display: block; /* ป้องกันช่องว่างด้านล่าง */
}