Twitter Bootstrap responsive images with different sizes resizing unproportionaly

Question

I'm new using the img-responsive class on bootstrap, i have the following page:

I want the images to show there with the same proportions, for example like the images at the right. i added this CSS and apply the class to the image but when i resize the window the responsive resizing is not proportioned.

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

Example of resizing WITH the CSS added:

This is my code:

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

I would like to know if its a way to do this without the un proportioned resizing. Thank you

Answer 1

Try with :

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

It will keep proportion and will be responsive. (I put 30% as default, feel free to adapt it)