छवि को फ्लेक्स आइटम की पूरी ऊंचाई लें

Question

मेरे पास एक कंटेनर है जो 100vh (निश्चित नौवें ऊंचाई से कम) है।

<div class="text"> 
    <p>title</p> 
</div> 

कौन सा किसी भी लम्बाई के हो सकता है के रूप में सामग्री गतिशील होती है:

<section class="container"> 

इस कंटेनर के अंदर मैं कुछ पाठ है। (- नव ऊंचाई) कंटेनर

<div class="image"> 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg"> 
</div> 

छवि 100vh के बाकी को भरने के लिए की जरूरत है:

इस पाठ के नीचे मैं एक छवि है।

मैं का उपयोग करें:

.container{ 
    display:flex; 
    flex-flow: column nowrap; 
    .... 

Fiddle

मुद्दा मैं कर रहा हूँ कि मैं छवि की जरूरत अंतरिक्ष के बाकी की ऊंचाई हो रहा है।

मैं यह कैसे कर सकता हूं? मेरी पहेली में, यदि आपकी स्क्रीन छोटी है तो इसे काट दिया जा रहा है और यदि आपकी स्क्रीन बड़ी है तो यह अंतरिक्ष को भर नहीं देती है। ऊंचाई: 100% काम करने में विफल रहता है, इसे बहुत बड़ा बना देता है।

फ्लेक्स समाधान केवल कृपया, कोई टेबल चाल नहीं - धन्यवाद!

Answer 1

छवि कंटेनर (.image) height: 100% के साथ एक फ्लेक्स कंटेनर बनाएं।

फिर आप object-fit/object-position के साथ छवि के पहलू अनुपात और संरेखण को ठीक-ठीक कर सकते हैं।

nav { 
 
    position:fixed; 
 
    background:grey; 
 
    width:100%; 
 
    height: 100px; 
 
} 
 

 
main { 
 
    padding-top: 100px; 
 
} 
 

 
.container { 
 
    display:flex; 
 
    flex-flow: column nowrap; 
 
    height: calc(100vh - 100px); 
 
    background: green; 
 
    border: 3px solid brown; 
 
} 
 

 
.text { background: yellow; } 
 

 

 
/* ***** NEW ***** */ 
 
.image { 
 
    display: flex; 
 
    justify-content: center; 
 
    height: 100%; 
 
} 
 
img { 
 
    width: 100%; 
 
    object-fit: contain; 
 
}

<nav>Nav</nav> 
 
<main> 
 
    <section class="container"> 
 
     <div class="text"><p>title</p></div> 
 
     <div class="image"> 
 
      <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg"> 
 
     </div> 
 
    </section> 
 
    <section class="container"> 
 
     <div class="text"><p>hello</p></div> 
 
     <div class="image"> 
 
      <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg"> 
 
     </div> 
 
    </section> 
 
</main>

Revised Fiddle

ध्यान दें कि object-fit संपत्ति आईई द्वारा समर्थित नहीं है। अधिक जानकारी और वर्कअराउंड के लिए देखें: https://stackoverflow.com/a/37127590/3597276

Answer 2

शायद वही नहीं जो आप चाहते थे, लेकिन यदि आप छवि को एक div में ले जाते हैं और इसे पृष्ठभूमि के रूप में उपयोग करते हैं, तो आप वांछित प्रभाव प्राप्त कर सकते हैं।

Fiddle

HTML: नव

शीर्षक

<section class="container"> 
    <div class="text"> 
    <p>hello</p> 
    </div> 
    <div class="imageWrap"> 
    <div class="image"></div> 
    </div> 
</section> 
</main> 

सीएसएस:

nav { 
    background: grey; 
    width: 100%; 
    height: 100px; 
    position: fixed; 
} 
main{ 
    padding-top: 100px; 
} 
.container{ 
    display: flex; 
    flex-flow: column nowrap; 
    height: calc(100vh - 100px); 
    background: green; 
    border: 3px solid brown; 
} 
.imageWrap { 
    flex: 1; 
    display: flex; 
} 
.image { 
    flex: 1; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-image: url(https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg) 
} 
.text{ 
    background: yellow; 
}