不同大小Twitter的引導敏感的圖像縮放unproportionaly

Question

我是新使用上引導的IMG響應類，我有以下頁面：

我想要的圖像以相同的比例顯示那裏，例如右側的圖像。我添加了這個CSS並將該類應用於圖像，但是當我調整窗口大小時，響應式調整大小不成比例。

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

用CSS調整的例子說：

這是我的代碼：

<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; 
} 

它將使比例，將響應。 （我把30％作爲默認情況下，隨意修改它）

Answer 2

這是因爲你正迫使圖像，以適應一個給定的比...

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

除非你的形象是一個比一個適合350x255，那麼它們將不成比例。 您需要設置寬度或高度，並將相反軸設置爲自動。 這將允許瀏覽器按比例調整圖像大小。

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