बूटस्ट्रैप - खिड़की की ऊंचाई फिट करने के लिए छवि को कैसे बढ़ाया जा सकता है?

Question

मैं छवि ओवरफ्लो ऊंचाई उत्तरदायी कैसे बना सकता हूं?

मेरे पास कभी-कभी छवियां लंबी ऊंचाई होती हैं जो विंडो स्क्रॉल बार को दृश्यमान बनाती हैं। बनाने के लिए छवि को छोटा किया जा रहा है खिड़की ऊंचाई फिट करने के लिए -

तो मैं उत्तरदायी इन ऊंचाइयों बनाना चाहते हैं।

क्या यह संभव है?

सीएसएस,

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0 0; 
    border: 4px solid black; 
} 

.container-fluid { 
    height: 100%; 
    display: table; 
    width: 100%; 
    padding-right: 0; 
    padding-left: 0; 
    border: 4px solid blue; 
} 

.row-fluid { 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 

    border: 4px solid red; 
} 

.centering { 
    float: none; 
    margin: 0 auto; 
} 

एचटीएमएल,

<div class="container-fluid"> 
    <div class="row-fluid text-center"> 
     <div> 
      <img src="images/xxx.jpg" class="img-responsive centering"> 
     </div> 
    </div> 
</div> 

Answer 1

आप img पर height: 100% और vertical-align: top उपयोग कर सकते हैं और माता पिता पर तत्व height: 100vh

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    height: 100vh; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
img { 
 
    height: 100%; 
 
    vertical-align: top; 
 
}

<div> 
 
    <img src="http://placehold.it/400x850"> 
 
</div>

Answer 2

द्वारा निर्मित बूटस्ट्रैप के .center-block

फिर एक नया वर्ग को जोड़ने के .centering वर्ग बदलें .myimg

.myimg { 
    margin: 0 auto; 
    position: absolute; 
    height:100%; 
    top:0; 
    bottom:0; 
} 

चेक इस बेला https://jsfiddle.net/wo2eysh8/3/