CSS से इमेज की ऊंचाई सेट करना

परिचय

`height` प्रॉपर्टी इमेज की ऊंचाई सेट करती है। मान लंबाई या प्रतिशत में हो सकता है।

सिंटैक्स

height: <length> | <percentage> | auto;

उदाहरण

<html>
<head>
    <style>
        .fixed-height {
            height: 100px;
            border: 2px solid green;
        }
        .percent-height {
            height: 50%;  /* पैरेंट कंटेनर के सापेक्ष */
            border: 2px solid green;
        }
        .auto-height {
            height: auto;  /* मूल अनुपात बनाए रखता है */
            width: 200px;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <img class="fixed-height" src="/css/images/logo.png" alt="Logo" />
    <br><br>
    <div style="height: 200px; border: 1px solid red;">
        <img class="percent-height" src="/css/images/logo.png" alt="Logo" />
    </div>
    <br>
    <img class="auto-height" src="/css/images/logo.png" alt="Logo" />
</body>
</html>

महत्वपूर्ण: पहलू अनुपात बनाए रखना

<style>
/* केवल ऊंचाई सेट करें - चौड़ाई ऑटो एडजस्ट होती है */
img.aspect-ratio {
    height: 150px;
    width: auto;  /* डिफ़ॉल्ट, लेकिन स्पष्ट होना अच्छा */
}

/* या object-fit उपयोग करें (आधुनिक) */
img.cover {
    width: 200px;
    height: 200px;
    object-fit: cover;  /* क्रॉप करके भरता है */
}
</style>

सर्वोत्तम अभ्यास

• केवल एक आयाम (चौड़ाई या ऊंचाई) सेट करें, दूसरा `auto` रहने दें
• दोनों सेट करने पर `object-fit: cover/contain/scale-down` उपयोग करें
• प्रतिशत ऊंचाई के लिए पैरेंट की निश्चित ऊंचाई आवश्यक
• रिस्पॉन्सिव के लिए: `max-width: 100%; height: auto;`