सभी छवियों को बनाने मैं एक ही ऊंचाई आकार 4 छवियों के सभी एक पंक्ति बनाने के लिए कोशिश कर रहा हूँ सब बूटस्ट्रैप

Question

में एक ही ऊंचाई के साथ दिखाई देते हैं, मैं पहले से ही चौड़ाई और ऊंचाई सीएसएस का उपयोग कर लेकिन कुछ भी काम करने के लिए लगता है के साथ चारों ओर खेलने की कोशिश की,

<div class="container" > 
    <div class="jumbotron" style="background: rgba(200, 54, 54, 0.0);"> 
     <div class="row"> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">One Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#"><img class="left-block img-responsive" src="images/genimage2.jpg" height="160" width="160" alt="" /></a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another another Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#"><img class="left-block img-responsive" src="images/genimage.png" width="160" height="160" alt="" /></a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Any other Random Item Any other Random Item </p> 
       <p>50 €</p> 
      </div> 
     </div> 

ऐसा ही होता है:

इस चित्र छवियाँ हमेशा परिदृश्य की तुलना में लम्बे खत्म, यहाँ कोड है मैं क्या चाहते हैं (एक ही ऊंचाई के साथ सभी)

Answer 1

आप चौड़ाई/ऊंचाई HTML में विशेषताओं से दूर ले और सीएसएस के साथ ऐसा कर सकता है। बस अपनी ऊंचाई को स्पष्ट रूप से सेट करें, और अपनी चौड़ाई auto के रूप में सेट करें। उदाहरण के लिए:

.img-responsive { 
    width: auto; 
    height: 100px; 
} 

आप क्षैतिज क्योंकि आप इन छवियों के किसी भी की सटीक चौड़ाई पता नहीं होगा एक बार वे छोटा किया गया है ध्यान रहे कि आप पर्याप्त जगह छोड़ करने की आवश्यकता होगी।

Answer 2

यहां इसके बारे में जाने का एक उत्तरदायी तरीका है।

.img-wrapper { 
    position: relative; 
    padding-bottom: 100%; 
    overflow: hidden; 
    width: 100%; 
} 
.img-wrapper img { 
    position: absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 


<div class="container" > 
    <div class="jumbotron" style="background: rgba(200, 54, 54, 0.0);"> 
     <div class="row"> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#" class="img-wrapper"> 
        <img class="left-block" src="images/genimage.png"alt="" /> 
       </a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">One Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#" class="img-wrapper"> 
        <img class="left-block" src="images/genimage.png"alt="" /> 
       </a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#" class="img-wrapper"> 
        <img class="left-block" src="images/genimage.png"alt="" /> 
       </a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Another another Random Item</p> 
       <p>50 €</p> 
      </div> 
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <a href="#" class="img-wrapper"> 
        <img class="left-block" src="images/genimage.png"alt="" /> 
       </a> 
       <p style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">Any other Random Item Any other Random Item </p> 
       <p>50 €</p> 
      </div> 
     </div> 

आप थोड़ा-आवरण img ऊंचाई प्रकट करने के लिए अपनी छवियों को प्राप्त करने के लिए की padding-bottom साथ खेलने के लिए होगा और अगर आप चाहते हैं छवियों col का% नहीं 100 प्रदर्शित लेकिन उन्हें ब्लॉक करना चाहते हैं आप रैपर से 100% चौड़ाई को हटा सकते हैं और डिस्प्ले ब्लॉक और कस्टम चौड़ाई जोड़ सकते हैं लेकिन यह काम करना चाहिए।