सीएसएस के साथ स्क्रीन ऊंचाई पर एक छवि का आकार बदलने के लिए कैसे?

Question

कई लोगों के विपरीत जो पूरी स्क्रीन को भरने के लिए एक छवि चाहते हैं, मुझे केवल छवि की ऊंचाई की परवाह है। किसी भी आकार के साथ छवि बनाने के लिए मैं सीएसएस (अधिमानतः जावास्क्रिप्ट नहीं) का उपयोग कैसे कर सकता हूं, अधिकतम संभावित ब्राउज़र विंडो का 100% तक भर सकता हूं ऊंचाई छवि के पहलू अनुपात को रखते हुए, सम्मान में छवि की पुन: आकार की चौड़ाई ब्राउज़र के लिए कोई फर्क नहीं पड़ता।

मैं इस एचटीएमएल के साथ काम कर रहा हूँ:

<div class="images"> 
    <img/> 
</div> 

बहुत बहुत शुक्रिया!

Answer 1

img { height:100% } 

या आप स्पष्ट होना चाहते हैं

img { height:100%; width:auto; } 

ऊंचाई 100%: http://jsfiddle.net/jmarikle/vz7q2bnk/
चौड़ाई 100%: http://jsfiddle.net/jmarikle/vz7q2bnk/1/

संपादित करें:

इस उत्तर में कुछ ध्यान की जरूरत । डेमो टूट गया था और आम तौर पर एक गड़बड़ थी। मैंने इसे नई छवियों, अद्यतन नियमों को छवियों की इनलाइन प्रकृति की क्षतिपूर्ति करने के लिए अद्यतन किया है, और शरीर की सामान्य ऊंचाई और चौड़ाई और HTML तत्वों को अद्यतन किया है।

Answer 2

यह overkill हो सकता है:

.img { 
    position: absolute; 
    height: 100% 
    top: 0; 
    bottom: 0; 
} 

Answer 3

तुम भी VH पर एक नज़र लेने के लिए चाहते हो सकता है, VW, vmin और VMAX सीएसएस इकाइयों - pretty well supported होते हैं। 100% ऊंचाई here प्राप्त करने के तरीके का वर्णन करने वाला एक अच्छा लेख है।

बीटीडब्ल्यू - व्हाइटस्पेस से सावधान रहें: यह एक अवांछित मार्जिन जोड़ सकता है। अंतरिक्ष को हटाने, एक फ्लोट जोड़ने, या font-size: 0 हैक का उपयोग करके इसे हल किया जाएगा। साथ ही, अन्य विधियों का उपयोग करते समय, शरीर और HTML तत्वों के लिए height: 100% सेट करना याद रखें।