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)

Answer 2

This is because you are forcing the images to fit a given ratio...

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

Unless your image is to a ratio that fits 350x255 then they will be out of proportion. You need to set EITHER the width OR height and set the opposite axis to auto. This will allow the browser to resize the image proportionately.

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