Twitter Bootstrap responsive images with different sizes, resizing disproportionately

Question

I am using the img-responsive class to bootstrap, I have the following page:

I want the images to appear there with the same proportions, for example, as the images on the right. I added this CSS and applied the class to the image, but when I resize the window, the resizing is not proportional.

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

Resize example with 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 this is a way to do this without incomparable resizing. thank you

Answer 1

Try:

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

He will maintain proportion and will react. (I set 30% by default, feel free to adapt it)

Answer 2

This is because you force images to match the given ratio ...

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

If your image does not match the ratio, which corresponds to 350x255, then they will be disproportionate. You must set the EITHER width or height and set the opposite axis on the car. This will allow the browser to resize the image proportionally.

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