ट्विटर बूटस्ट्रैप उत्तरदायी छवियों unproportionaly

Question

मैं बूटस्ट्रैप पर img संवेदनशील वर्ग का उपयोग कर, मैं निम्नलिखित पृष्ठ है नया हूँ दाईं ओर छवियों की तरह उदाहरण। मैंने इस सीएसएस को जोड़ा और छवि को कक्षा में लागू किया लेकिन जब मैं खिड़की का आकार बदलता हूं तो उत्तरदायी आकार बदलने का अनुपात नहीं होता है।

.imageClip{ 
    width:350px; 
    height:255px; 
    overflow:hidden; 
} 

सीएसएस के साथ आकार बदलने का उदाहरण कहा:

यह मेरा कोड है:

<div class="col-sm-4"> 

     <img class="img-responsive imageClip" src="{$servicio.med_ruta}"> 

     <h3>{$servicio.ser_nombre}</h3> 
     <p>{$servicio.ser_descripcion}</p> 
     <a class="btn btn-link btn-sm pull-right">More <i class="icon-angle-right"></i></a> 
</div> 

मैं चाहते हैं जानना चाहते हैं कि इसके लिए एक तरह से बिना यह करने के लिए गैर आनुपातिक आकार बदलना। धन्यवाद के साथ

Answer 1

प्रयास करें:

.imageClip{ 
    width:30%; 
    height: auto; 
    overflow:hidden; 
} 

यह अनुपात रखना होगा और उत्तरदायी होगा।

Answer 2

इसका कारण यह है कि आप एक निश्चित अनुपात फिट करने के लिए छवियों के लिए मजबूर कर रहे हैं (मैं डिफ़ॉल्ट के रूप में 30% कर दिया है, यह अनुकूलित करने के लिए स्वतंत्र लग रहा है) ...

.imageClip 
    { 
    width:350px; 
    height:255px; 
    overflow:hidden; 
    } 

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

.imageClip 
    { 
    width:350px; 
    height:auto; 
    overflow:hidden; 
    }